需求:
表格数据根据筛选数据动态展示,可全选/取消全选或单独选择展示。
如下图:
代码地址:https://gitee.com/tudoumlp/just1.git 文件目录下的(vue-ele-demo).
如下:
1,结构部分:
<!-- 表格列筛选 -->
<div style="text-align: right;margin-bottom: 0.5rem;">
<el-popover placement="right" width="" trigger="click">
<el-checkbox-group v-model="tableFilterData.checkBoxList">
<template v-for="(item, i) in tableFilterData.dataNow2">
<el-checkbox :label="item.attr" :key="i" checked style="display: block;margin:10px;" @change="filterFunHandle('filter',item.attr,i)">
{{item.label}}
</el-checkbox>
</template>
</el-checkbox-group>
<el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu" /> 列筛选</el-button>
<el-button size="small" type="text" @click="filterFunHandle('allchecked')">全选</el-button>
<el-button size="small" type="text" @click="filterFunHandle('cancel')">取消全选</el-button>
</el-popover>
</div>
<!-- 筛选表格 -->
<el-table size="small" border :data="tableFilterData.dataList" style="width: 100%;">
<el-table-column type="selection" fixed="left" header-align="center" align="center" width="50"></el-table-column>
<template v-for="(col,index) in tableFilterData.dataNow">
<el-table-column :key="index" align="center" :prop="col.attr" :label="col.label" min-width="180">
</el-table-column>
</template>
<el-table-column label="操作" fixed="right" header-align="center" align="center" width="" min-width="170">
<template slot-scope="scope">
<el-button type="text" size="small">修改</el-button>
</template>
</el-table-column>
</el-table>
2,数据部分:数据都是模拟数据
dataList是表格数据,dataNow和dataNow2是需要进行筛选控制是否显示的数据,之所以是两个,是因为一个dataNow2需要保存默认的数据,dataNow是操作时候动态变化的数据,如[{label: “性别”, attr: “sex”},{label: “姓名”, attr: “name”}] 表示只显示姓名和性别这两个列。
checkLabels是表格所有的表头数据,checkBoxList是操作时候动态变化的表头标题数据,如[“name”, “sex”] 表示只显示姓名和性别这两列数据。
data () {
return {
// 表格列筛选数据
tableFilterData:{
dataList: [
{name: "张三", sex: "男", age: "22", address: "天津", 'position': '人'},
{name: "李四", sex: "保密", age: "45", address: "河北", 'position': '人'},
{name: "王五", sex: "女", age: "26", address: "北京", 'position': '人'}
],
dataNow2: [
{label: "姓名", attr: "name"},
{label: "性别", attr: "sex"},
{label: "年龄", attr: "age"},
{label: "角色", attr: "position"},
{label: "地址", attr: "address"}
],
dataNow: [
{label: "姓名", attr: "name"},
{label: "性别", attr: "sex"},
{label: "年龄", attr: "age"},
{label: "角色", attr: "position"},
{label: "地址", attr: "address"}
],
checkLabels: [], // 筛选列显示多选框数据
checkBoxList: [] // 筛选列数据
}
}
}
3,方法部分:全选,取消全选,单独选择都在此方法。
// 列筛选
filterFunHandle (type, currentItem, index) {
if (type === 'filter') { // 筛选列
if (event.target.checked === false) {
let addItem = this.tableFilterData.dataNow.filter((item, index, arr) => {
return currentItem !== item.attr
})
this.tableFilterData.dataNow = addItem
} else {
let checkData = this.tableFilterData.dataNow2.filter((item, index, arr) => {
return currentItem === item.attr
})
checkData.map((item, index, arr) => {
this.tableFilterData.dataNow.unshift(item)
})
}
} else if (type === 'allchecked') { // 全选
if (this.tableFilterData.checkLabels.length === 0) {
this.tableFilterData.dataNow2.forEach((result) => {
this.tableFilterData.checkLabels.push(result.attr)
})
this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值,全部选择
this.tableFilterData.dataNow = this.tableFilterData.dataNow2
} else {
this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值,全部选择
this.tableFilterData.dataNow = this.tableFilterData.dataNow2
}
} else if (type === 'cancel') { // 取消全选
this.tableFilterData.checkBoxList = [] // 复选框置为空,全部不选择
this.tableFilterData.dataNow = []
}
}
4,完整vue文件:
<template>
<div class="table">
<el-divider content-position="left">表格筛选</el-divider>
<!-- 表格列筛选 -->
<div style="text-align: right;margin-bottom: 0.5rem;">
<el-popover placement="right" width="" trigger="click">
<el-checkbox-group v-model="tableFilterData.checkBoxList">
<template v-for="(item, i) in tableFilterData.dataNow2">
<el-checkbox :label="item.attr" :key="i" checked style="display: block;margin:10px;" @change="filterFunHandle('filter',item.attr,i)">
{{item.label}}
</el-checkbox>
</template>
</el-checkbox-group>
<el-button size="small" slot="reference"><i class="el-icon-arrow-down el-icon-menu" /> 列筛选</el-button>
<el-button size="small" type="text" @click="filterFunHandle('allchecked')">全选</el-button>
<el-button size="small" type="text" @click="filterFunHandle('cancel')">取消全选</el-button>
</el-popover>
</div>
<!-- 筛选表格 -->
<el-table size="small" border :data="tableFilterData.dataList" style="width: 100%;">
<el-table-column type="selection" fixed="left" header-align="center" align="center" width="50"></el-table-column>
<template v-for="(col,index) in tableFilterData.dataNow">
<el-table-column :key="index" align="center" :prop="col.attr" :label="col.label" min-width="180">
</el-table-column>
</template>
<el-table-column label="操作" fixed="right" header-align="center" align="center" width="" min-width="170">
<template slot-scope="scope">
<el-button type="text" size="small">修改</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
// 表格列筛选数据
tableFilterData:{
dataList: [
{name: "张三", sex: "男", age: "22", address: "天津", 'position': '人'},
{name: "李四", sex: "保密", age: "45", address: "河北", 'position': '人'},
{name: "王五", sex: "女", age: "26", address: "北京", 'position': '人'}
],
dataNow2: [
{label: "姓名", attr: "name"},
{label: "性别", attr: "sex"},
{label: "年龄", attr: "age"},
{label: "角色", attr: "position"},
{label: "地址", attr: "address"}
],
dataNow: [
{label: "姓名", attr: "name"},
{label: "性别", attr: "sex"},
{label: "年龄", attr: "age"},
{label: "角色", attr: "position"},
{label: "地址", attr: "address"}
],
checkLabels: [], // 筛选列显示多选框数据
checkBoxList: [] // 筛选列数据
}
}
},
methods: {
// 列筛选
filterFunHandle (type, currentItem, index) {
if (type === 'filter') { // 筛选列
if (event.target.checked === false) {
let addItem = this.tableFilterData.dataNow.filter((item, index, arr) => {
return currentItem !== item.attr
})
this.tableFilterData.dataNow = addItem
} else {
let checkData = this.tableFilterData.dataNow2.filter((item, index, arr) => {
return currentItem === item.attr
})
checkData.map((item, index, arr) => {
this.tableFilterData.dataNow.unshift(item)
})
}
} else if (type === 'allchecked') { // 全选
if (this.tableFilterData.checkLabels.length === 0) {
this.tableFilterData.dataNow2.forEach((result) => {
this.tableFilterData.checkLabels.push(result.attr)
})
this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值,全部选择
this.tableFilterData.dataNow = this.tableFilterData.dataNow2
} else {
this.tableFilterData.checkBoxList = this.tableFilterData.checkLabels // 复选框置为复选所有值,全部选择
this.tableFilterData.dataNow = this.tableFilterData.dataNow2
}
} else if (type === 'cancel') { // 取消全选
this.tableFilterData.checkBoxList = [] // 复选框置为空,全部不选择
this.tableFilterData.dataNow = []
}
}
}
}
</script>
仅做一丢丢分享和记录,若有错误也烦请大佬指正,谢谢哇哇哇~~