vue+element

2023-10-12 23:00| 来源: 网络整理| 查看: 265

需求：表格数据根据筛选数据动态展示，可全选/取消全选或单独选择展示。如下图：在这里插入图片描述代码地址：https://gitee.com/tudoumlp/just1.git 文件目录下的(vue-ele-demo).

如下：

1，结构部分：

{{item.label}} 列筛选全选取消全选修改

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文件：

表格筛选 {{item.label}} 列筛选全选取消全选修改 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 = [] } } } }

仅做一丢丢分享和记录，若有错误也烦请大佬指正，谢谢哇哇哇~~

【本文地址】

公司简介

联系我们