哈喽，大家好，最近碰到一个需求，实现动态表格渲染和列筛选的功能，还涉及到单元格点击事件，花了一些时间研究，积累，现在记录一下，做个总结，也分享给有需要的同学。
备注：代码可以直接复制到编辑器运行，显示效果，亲测。
<template>
<div class="containClass">
分类
<h3 class="title">列动态展示table案例</h3>
<el-popover placement="bottom" width="800" title="列筛选" v-model="visible" trigger="click">
<!-- 默认展示全部列数据 -->
<el-checkbox-group v-model="checkList">
<el-checkbox
:label="item.label"
:value="item.prop"
v-for="(item, i) in columnList"
:key="i"
style="min-height:50px;"
></el-checkbox>
</el-checkbox-group>
<span class="filterFuncClass" @click="handlerFilterFunc('filter')"
>筛选</span
>
<span class="filterFuncClass" @click="handlerFilterFunc('cancel')"
>取消</span
>
<span></span>
<span class="filterClass" slot="reference"
>列设置
<i class="fa fa-filter"></i>
</span>
</el-popover>
<!-- 动态渲染表格 -->
<el-table :data="tableData" border stripe :cell-class-name="tableCellClassName" @cell-click="cellClick">
<el-table-column
type="index"
label="序号"
width="100"
align="center"
></el-table-column>
<!-- 动态渲染列 -->
<el-table-column
v-for="(col, index) in tableHead"
:key="index"
align="center"
sortable
:prop="col.prop"
:label="col.label"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "Catelog",
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "",
address: "上海市普陀区金沙江路 1518 弄",
salary: 10000
},
{
date: "2016-05-04",
name: "张小龙",
address: "上海市普陀区金沙江路 1517 弄",
salary: 12000
},
{
date: "2016-05-01",
name: "赵小牛",
address: "上海市普陀区金沙江路 1519 弄",
salary: 9000
},
],
visible:false,
tableHead: [],//表头数据
columnList: [],//筛选字段整体列表
checkList: []//选中的复选框内容列表
};
},
methods: {
//js
tableCellClassName({row, column, rowIndex, columnIndex}){//注意这里是解构
//利用单元格的 className 的回调方法，给行列索引赋值
row.index=rowIndex;
column.index=columnIndex;
},
//点击单元格，拿到当前的单元格的内容,并打印是在第几行第几列
cellClick(row, column, cell, event){
console.log(row.index);//单元格的行数下标
console.log(column.index);//单元格的列数下标
console.log(row[column.property],'获取到的属性值内容')//通过这个属性值进行操作，如果为空，说明没有值
},
// 通过筛选列拿到的值进行赋值给表头数据tableHead渲染，进行表格列的实时显示与隐藏
handlerFilterFunc(type) {
// 点击筛选按钮
if (type === "filter") {
console.log(this.checkList);
// 如果没有勾选任何值，进行提示勾选，否则不进行任何筛选
if (this.checkList.length == 0) {
return this.$message.warning("请勾选要展示的列");
}
// 设置一个存储表头数据的数组，用来替换之前的表头
const newTableHead = [];
// 循环复选框选中的值与列字段列表，通过label进行比对，找到相同的，将其对应的lable和prop值存进数组newtableHead
for (const ch of this.checkList) {
for (const lb of this.columnList) {
if (ch == lb.label) {
newTableHead.push({
prop: lb.prop,
label: lb.label
});
}
}
}
// 将映射完的数组重新赋给tableData里动态循环列的tableHead
this.tableHead = newTableHead;
this.visible = false
} else if (type === "cancel") {
//取消功能让选中的值都清空
this.checkList = [];
this.visible = false
console.log(this.tableHead, 1111);
}
}
},
created() {
// 获取列筛选表格数据
this.columnList.push(
{
prop: "date",
label: "日期"
},
{
prop: "name",
label: "姓名"
},
{
prop: "address",
label: "地址"
}
);
// 获取表头数据
this.tableHead.push(
{
prop: "date",
label: "日期"
},
{
prop: "name",
label: "姓名"
},
{
prop: "address",
label: "地址"
}
);
console.log(this.tableHead);
// this.checkList =["日期"]
// 设置默认选中值 this.checkList，从列筛选表格数据中循环获取文字label，进行设置默认值,全部显示勾选状态，不设置，即为空
this.columnList.map(item => {
this.checkList.push(
item.label
)
return this.checkList
})
}
};
</script>
