带筛选功能的el-table

多选展示

单选展示

Html部分代码

<el-table
          :data="tableData"
          @filter-change="filterChange"
          :header-cell-style="{background:'#ededed'}"
          stripe
          height="600"
          style="width: 100%"
        >
          <el-table-column
            prop="states"
            label="侦测状态"
            aign="center"
            :filter-multiple="false"
            :filters="statesOptions"
            column-key="states"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.states=='pending' ? 'danger' : (scope.row.states=='processing' ? 'warning' : (scope.row.states=='pass' ? 'success' : (scope.row.states=='verifying' ? 'info' : '')))"
              >{{scope.row.states=='pending' ? '待处理' : (scope.row.states=='processing' ? '处理中' : (scope.row.states=='pass' ? '已处理' : (scope.row.states=='verifying' ? '检测中' : '')))}}</el-tag>
            </template>
          </el-table-column>
  
        </el-table>

column-key=“states” 指定筛选条件字段（filterChange方法有一个参数filters states就说该参数的一个值）
:filter-multiple=“false” 指定多选或单选

data部分

data(){
return{
statesOptions: [
        { value: "pending", text: "待处理" },
        { value: "processing", text: "处理中" },
        { value: "verifying", text: "检测中" },
        { value: "pass", text: "已处理" },
      ],
}
}

statesOptions为筛选选项

JS部分代码

filterChange(filters) {
      this.requestData.states=filters.states.join(); 
      this.handleCurrentChange(1);  //只要是有查询  都要更新一下当前页  否则数据有时候会不显示  
      this.getList();
    },

注意：this.handleCurrentChange(1);
只要有查询 不管是怎么查询 获取数据列表前 都需要这一行代码 加上后用户体验较好