How to create custom label for table column in element ui in vue

Question

I have a table with element ui and I have periods array:

periods: [
        { period: 'Today' },
        { period: 'Yesterday' },
      ],

And here is my table:

<el-table :data="periods" :show-header="false">
              <el-table-column type="expand">
                <template v-slot="scope">
                  <div v-if="scope.row.period === 'Today'">
                    //Do something
                  </div>
                  <div v-else-if="scope.row.period === 'Yesterday'">
                    //Do something else
                  </div>
                  
                </template>
              </el-table-column>
              <el-table-column prop="period" />
            </el-table>

And here what I have created in screenshot:

I want to add something custom next to 'Today' or 'Yesterday'. That means next to period. For example, I want to add countNumber next to it but I dont know how to do with prop attribute.

Answer 1

The <el-table-column type="expand"> is used for expandable rows.

What you want is to customise the <el-table-column prop="period"> by providing a template:

  <el-table-column prop="period">
    <template v-slot="{row}">
      {{ row.period }} {{ getPeriodCount(row.period) }}
    </template>
  </el-table-column>

In your controller, define getPeriodCount:

const getPeriodCount = (period) => {
  if (period === 'Today') {
    return //...
  }
  if (period === 'Yesterday') {
    return //...
  }
}

If you use Options API, getPeriodCount would be a method:

export default {
  //...
  methods: {
    getPeriodCount(period) {
      //...
    }
  }
}