vue+elementui(table,多选框)实现动态控制表格列的显示和隐藏，供大家参考，具体内容如下
imdex.vue
<template>
<div>
<div>
<el-table :data="tableData" border style="width: 100%" ref="table">
<el-table-column prop="index" label="序号" width="150">
<template slot-scope="scope">
<div>{{ scope.$index + 1 }}</div>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in againRender"
:width="item.width"
:prop="item.prop"
:key="index"
show-overflow-tooltip
:label="item.label"
></el-table-column>
</el-table>
</div>
<div class="dsadas">
<new-checkbox :all-item-data="itemList" :change-props="changeProps" />
</div>
</div>
</template>
<script>
import axios from "axios";
// 采用异步加载,防止父组件引入子组件，子组件的的钩子函数全部执行完毕
const newCheckbox = () => ({
component: import("./checkBox.vue"),
delay: 2000,
timeout: 2000,
});
export default {
data() {
return {
tableData: [],
againRender: [],
itemList: [
{
allListDate: [
// 后台数据结构跟这有一样
{ label: "姓名", width: "120", prop: "name" },
{ label: "性别", width: "120", prop: "sex" },
{ prop: "age", label: "年龄", width: "120" },
{ prop: "styChild", label: "身份", width: "120" },
{ prop: "gradeClass", label: "学历", width: "200" },
],
selectedList: [
{ label: "姓名", width: "120", prop: "name" },
{ label: "性别", width: "120", prop: "sex" },
{ prop: "age", label: "年龄", width: "120" },
],
},
],
};
},
components: { newCheckbox },
mounted() {
this.getElementVauleHieen();
},
methods: {
changeProps(value) {
this.$nextTick((_) => {
this.againRender= value;
this.$refs.table.doLayout;
});
},
getElementVauleHieen() {
axios.get("http://localhost:3000/elementVauleHieen").then((res) => {
this.tableData = res.data;
});
},
},
};
</script>
<style lang="less">
</style>
checkBox.vue文件
<template>
<div>
<div>
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChange"
>全选</el-checkbox
>
</div>
<el-checkbox-group
v-model="checkedCities"
@change="handleCheckedCitiesChange"
>
<el-checkbox
v-for="(item, index) in allItemDataChecked"
:label="item.label"
:key="index"
@change="(val) => checkboxChange(val, item, index)"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</div>
</template>
<script>
export default {
name: "checkBox",
data() {
return {
isIndeterminate: false,
checkAll: false,
checkedCities: [],
allItemDataChecked: this.allItemData[0].allListDate,
checkboxChangeList: [],
};
},
props: {
allItemData: {
type: Array,
default: () => [],
},
changeProps: {
type: Function,
default: () => false,
},
},
mounted() {
let list = [];
if (this.allItemDataChecked.length) {
this.allItemDataChecked.forEach((element) => {
this.allItemData[0].selectedList.forEach((item) => {
if (element.prop === item.prop && element.label === item.label) {
list.push(item.label);
}
});
});
this.checkedCities = list;
}
},
watch: {
checkedCities(newVlaue) {
this.checkboxChangeList = []; // 防止多次点击重复触发数据
if (newVlaue.length === 0) {
this.changeProps([]);
} else {
this.allItemDataChecked.forEach((ele) => {
newVlaue.forEach((item) => {
if (ele.label === item) {
this.checkboxChangeList.push(ele);
this.checkboxChange();
}
});
});
}
},
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = [];
let result = [];
this.checkedCities = val
? this.allItemDataChecked.forEach((element) => {
result.push(element.label);
})
: [];
this.checkedCities = result;
},
handleCheckedCitiesChange(value) {
this.checkAll = value.length === this.allItemDataChecked.length;
},
checkboxChange() { // 发现这个没用
this.changeProps(this.checkboxChangeList);
},
},
};
</script>
<style lang="less">
</style>
