详解使用element-ui table组件的筛选功能的一个小坑

  <el-table-column v-if=\"key===\'isShow\'\" label=\"是否在发现页展示\" :filters=\"[{text:\'已展示\',value: true},{text: \'未展示\', value: false}]\" :filter-method=\"filterShow\">
        <template slot-scope=\"scope\">
          <el-tag type=\"success\" v-if=\"scope.row.isShow\">显示</el-tag>
          <el-tag type=\"danger\" v-else>不显示</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-else-if=\"key===\'isHandle\'\" label=\"是否已经审核\" :filters=\"[{text:\'已处理\',value: true},{text: \'未处理\', value: false}]\" :filter-method=\"filterHandle\">
        <template slot-scope=\"scope\">
          <el-tag type=\"info\" v-if=\"scope.row.isHandle\">已处理</el-tag>
          <el-tag type=\"warning\" v-else>未处理</el-tag>
        </template>
      </el-table-column>

<template>
 <el-table
  :data=\"tableData\"
  style=\"width: 100%\">
  <el-table-column
   label=\"日期\"
   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=\"姓名\"
   width=\"180\">
   <template slot-scope=\"scope\">
    <el-popover trigger=\"hover\" placement=\"top\">
     <p>姓名: {{ scope.row.name }}</p>
     <p>住址: {{ 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=\"操作\">
   <template slot-scope=\"scope\">
    <el-button
     size=\"mini\"
     @click=\"handleEdit(scope.$index, scope.row)\">编辑</el-button>
    <el-button
     size=\"mini\"
     type=\"danger\"
     @click=\"handleDelete(scope.$index, scope.row)\">删除</el-button>
   </template>
  </el-table-column>
 </el-table>
</template>

< >
 export default {
  data() {
   return {
    tableData: [{
     date: \'2016-05-02\',
     name: \'王小虎\',
     address: \'上海市普陀区金沙江路 1518 弄\'
    }, {
     date: \'2016-05-04\',
     name: \'王小虎\',
     address: \'上海市普陀区金沙江路 1517 弄\'
    }, {
     date: \'2016-05-01\',
     name: \'王小虎\',
     address: \'上海市普陀区金沙江路 1519 弄\'
    }, {
     date: \'2016-05-03\',
     name: \'王小虎\',
     address: \'上海市普陀区金沙江路 1516 弄\'
    }]
   }
  },
  methods: {
   handleEdit(index, row) {
    console.log(index, row);
   },
   handleDelete(index, row) {
    console.log(index, row);
   }
  }
 }
</ >

<el-table-column v-if=\"key===\'isShow\'\" label=\"是否在发现页展示\" prop=\"isShow\" :filters=\"[{text:\'已展示\',value: true},{text: \'未展示\', value: false}]\" :filter-method=\"filterShow\">
        <template slot-scope=\"scope\">
          <el-tag type=\"success\" v-if=\"scope.row.isShow\">显示</el-tag>
          <el-tag type=\"danger\" v-else>不显示</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-else-if=\"key===\'isHandle\'\" label=\"是否已经审核\" prop=\"isHandle\" :filters=\"[{text:\'已处理\',value: true},{text: \'未处理\', value: false}]\" :filter-method=\"filterHandle\">
        <template slot-scope=\"scope\">
          <el-tag type=\"info\" v-if=\"scope.row.isHandle\">已处理</el-tag>
          <el-tag type=\"warning\" v-else>未处理</el-tag>
        </template>
      </el-table-column>