el-table中加入复选框和过滤器,会冲突,请问如何解决?

问题描述

使用element-ui建立表格,在表格中使用多选功能和过滤器功能,发现两个功能冲突,过滤器的复选框无法实现多选,请教各位大神,要在表格中同时实现这两个功能应该怎么写?在此叩谢!!!!

相关代码

<el-table
    ref="multipleTable"
    :data="tableData5"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column> 
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
     <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column> 
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
    <el-table-column
      prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '家', value: '家' },{text: '公司', value: '公司'}]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag === '家' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
  </el-table>
<script>
export default {
  data() {
    return {
        tableData5: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          tag: '家'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          tag: '公司'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          tag: '家'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          tag: '公司'
        }],
      multipleSelection: [],
      dialogTableVisible: false,  
    };
  },
 methods: {
    filterTag(value, row) {
        return row.tag === value;
      },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
}
}
</script>

希望实现的功能

我希望实现的功能是在表格中操作,点击复选框可以全选或者自由选择表格中的任意行,使用筛选器可以选出需要的行。
现在的问题是运行报错,而且筛选器变得无法多选筛选条件。

阅读 3.7k
2 个回答

使用三目,不用过滤器

新手上路,请多包涵

这问题解决了嘛,求私密

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题