vue.jsvuejs2vue-componentelement-ui

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


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: enter image description here

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.


Solution

  • 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) {
          //...
        }
      }
    }