How to dynamically control the display and hiding of table columns by vue+elementui
这篇文章主要介绍了vue+elementui怎么实现动态控制表格列的显示和隐藏的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue+elementui怎么实现动态控制表格列的显示和隐藏文章都会有所收获，下面我们一起来看看吧。
imdex.vue
{{ scope.$index + 1 }} 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; }); }, },};
checkBox.vue文件
全选 {{ item.label }} 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); }, },};关于"vue+elementui怎么实现动态控制表格列的显示和隐藏"这篇文章的内容就介绍到这里，感谢各位的阅读!相信大家对"vue+elementui怎么实现动态控制表格列的显示和隐藏"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。
