vue中控制element表格列的显示与隐藏
vue中控制element表格列的显示与隐藏
·
根据项目需要,需要可以动态控制表格列的显示与隐藏,如下图,复选框选中状态下为显示,为选中状态下为隐藏
思路就是:我们通过vue的监听功能来监听复选框的变化,当复选框发生了变化的时候,我们看对应复选框的选中和未选中的值。选中的为true让对应的列显示、隐藏的为false让对应的列隐藏。当然因为vue是数据的双向绑定的,所以我们就让对应的列的隐藏和表格的隐藏一一对应即可。
<template>
<div>
<el-button @click="showColumnOption">点击</el-button> //点击按钮弹出复选框
<div class="show" style="margin:20px 0 0 10px">
<transition>
<div class="columnOption" v-show="isShowColumn">
<div class="content">
<div class="head" style="color:#666666;font-weight: 600;font-size: 14px;">选择显示字段</div>
<div class="body">
<el-checkbox v-model="checkList.base_name">基地名称</el-checkbox>
<el-checkbox v-model="checkList.images">基地图片</el-checkbox>
<el-checkbox v-model="checkList.id">所属区域</el-checkbox>
<el-checkbox v-model="checkList.address">基地详细地址</el-checkbox>
<el-checkbox v-model="checkList.base_area">基地面积</el-checkbox>
<el-checkbox v-model="checkList.base_user_name">基地负责人</el-checkbox>
<el-checkbox v-model="checkList.user_phone">联系方式</el-checkbox>
<el-checkbox v-model="checkList.base_status">基地状态</el-checkbox>
<el-button size="small" type="primary" plain @click="saveColumn" style="margin:-5px 0 0 20px">
保存列配置
</el-button>
</div>
</div>
</div>
</transition>
</div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="base_name" label="基地名称" width="" v-if="showColumn.base_name" /> //将列的显示与隐藏用一个变量来控制,通过控制变量操作即可
<el-table-column prop="images" label="基地图片" width="" v-if="showColumn.images" />
<el-table-column prop="id" label="所属区域" width="" v-if="showColumn.id" />
<el-table-column prop="address" label="基地详细地址" width="" v-if="showColumn.address" />
<el-table-column prop="base_area" label="基地面积" width="" v-if="showColumn.base_area" />
<el-table-column prop="base_user_name" label="基地负责人" width="" v-if="showColumn.base_user_name" />
<el-table-column prop="user_phone" label="联系方式" width="" v-if="showColumn.user_phone" />
<el-table-column prop="base_status" label="基地状态" width="" v-if="showColumn.base_status" />
<el-table-column label="操作" width="">
<template>
<el-button size="small">编辑</el-button>
<el-button size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
const showColumn = { //通过控制这个实现显示与隐藏
base_name: true,
user: true,
address: true,
base_area: true,
base_user_name: true,
user_phone: true,
};
export default {
data() {
return {
isShowColumn: false, //控制显示与隐藏,默认隐藏
// 列的配置化对象,存储配置信息
checkList: {},//复选框绑定的值
showColumn,
tableData: [
{
base_name: "AAA",
longAndlat: "AAA",
user: "AAA",
address: "AAA",
base_area: "AAA",
base_user_name: "AAA",
user_phone: "AAA",
},
{
base_name: "BBB",
longAndlat: "BBB",
user: "BBB",
address: "BBB",
base_area: "BBB",
base_user_name: "BBB",
user_phone: "BBB",
},
{
base_name: "CCC",
longAndlat: "CCC",
user: "CCC",
address: "CCC",
base_area: "CCC",
base_user_name: "CCC",
user_phone: "CCC",
},
]
}
},
watch: {
// 监听复选框配置列所有的变化
checkList: {
handler: function (newnew) {
// console.log(newnew);
this.showColumn = newnew;
// 这里需要让表格重新绘制一下,否则会产生固定列错位的情况
this.$nextTick(() => {
this.$refs.table.doLayout();
});
},
deep: true,
immediate: true
},
},
mounted() {
// 发请求得到checkListInitData的列的名字
if (localStorage.getItem("columnSet")) {
this.checkList = JSON.parse(localStorage.getItem("columnSet"))
} else {
this.checkList = {
base_name: true,
user: true,
address: true,
base_area: true,
base_user_name: true,
user_phone: true,
};
}
},
methods: {
showColumnOption() {
this.isShowColumn = true;
},
saveColumn() {
localStorage.setItem("columnSet", JSON.stringify(this.checkList))//用户点击复选框,永久储存
this.isShowColumn = false;
}
}
}
</script>
ok 解决
更多推荐
已为社区贡献1条内容
所有评论(0)