问题描述
使用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>
希望实现的功能
我希望实现的功能是在表格中操作,点击复选框可以全选或者自由选择表格中的任意行,使用筛选器可以选出需要的行。
现在的问题是运行报错,而且筛选器变得无法多选筛选条件。
使用三目,不用过滤器