A small pit using the filtering function of the element UI table component

Using custom templates and filtering features, the first code

    <el-table-column v-if="key==='isShow'" label="Display on discovery page or not" :filters="[{text:'Demonstrated',value: true},{text: 'Not shown', value: false}]" :filter-method="filterShow">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.isShow">display</el-tag>
                    <el-tag type="danger" v-else>No display</el-tag>
                </template>
            </el-table-column>
            <el-table-column v-else-if="key==='isHandle'" label="Has it been approved" :filters="[{text:'Processed',value: true},{text: 'Untreated', value: false}]" :filter-method="filterHandle">
                <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.isHandle">Processed</el-tag>
                    <el-tag type="warning" v-else>Untreated</el-tag>
                </template>
            </el-table-column>

Then it was found that the filtering function could not be realized, and it was only found after searching the reasons online. Although the official website wrote the example code of the custom template as follows:

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="date"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Full name"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>Full name: {{ scope.row.name }}</p>
          <p>address: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="operation">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Xiao Hu Wang',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Xiao Hu Wang',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Xiao Hu Wang',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Xiao Hu Wang',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

It is to use scope instead of prop, that is to say, prop is not added.
This is where the pit is located. When the filter function of element is used internally, prop should be used, so the filter function can be used after adding prop:

<el-table-column v-if="key==='isShow'" label="Display on discovery page or not"  prop="isShow" :filters="[{text:'Demonstrated',value: true},{text: 'Not shown', value: false}]" :filter-method="filterShow">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.isShow">display</el-tag>
                    <el-tag type="danger" v-else>No display</el-tag>
                </template>
            </el-table-column>
            <el-table-column v-else-if="key==='isHandle'" label="Has it been approved" prop="isHandle" :filters="[{text:'Processed',value: true},{text: 'Untreated', value: false}]" :filter-method="filterHandle">
                <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.isHandle">Processed</el-tag>
                    <el-tag type="warning" v-else>Untreated</el-tag>
                </template>
            </el-table-column>

Use the filtering function of table component of elementUi to remember to add prop!!!