<template>
<div>
<el-table ref="filterTable" :data="tableData" style="width: 100%">
<el-table-column
prop="date"
label="日期"
sortable
width="180"
column-key="date"
>
</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="arr"
:filtered-value="[key]"
:filter-method="filterTag"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
//:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
return {
key:'家',
filterList:[],
arr:[],
tableData: [{
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: '公司'
}]
}
},
created(){
this.filterList = []
this.tableData.forEach((item,index)=>{
var obj = {}
obj.text = item.tag
obj.value = item.tag
this.filterList.push(obj)
})
var arr = JSON.parse(JSON.stringify(this.filterList))
this.arr = this.deWeight(arr)
},
methods: {
filterTag(value, row) {
return row.tag === value;
},
deWeight(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i].text == arr[j].text) {
arr.splice(j, 1);
//因为数组长度减小1,所以直接 j++ 会漏掉一个元素,所以要 j--
j--;
}
}
}
return arr;
}
}
}
</script>
el-table 筛选功能
最新推荐文章于 2024-08-20 09:45:52 发布