vue动态控制el-table表格每一列的显示
vue动态控制el-table表格每一列的显示
·
在实际需求中我们常遇见这样的需求:
我们需要像如下方式一样动态控制表列的显示;
实现方法:
html:
<el-popover placement="bottom-end" width="370" trigger="hover">
<el-button
slot="reference"
class="cu-ordinaryBtn"
icon="icon iconfont icon-shezhi-xianxing"
style="margin-right: 10px"
>设置</el-button
>
<template slot>
<div>
<el-checkbox-group
v-model="checkedTableLines"
style="padding: 10px; padding-top: 0px"
>
<el-checkbox
style="margin-top: 15px"
v-for="item in tableLines"
:label="item"
:key="item"
>
{{ item }}
</el-checkbox>
</el-checkbox-group>
</div>
</template>
</el-popover>
script:
<script>
const tabLineOptions = [
"房屋编码",
"建筑面积",
"使用面积",
"朝向",
"房屋性质",
"房屋用途",
"装修性质",
"备注",
"添加时间",
"创建账号",
];
export default {
data() {
return {
checkedTableLines: [
"建筑面积",
"使用面积",
"朝向",
"房屋性质",
"房屋用途",
"装修性质",
],
cities: tabLineOptions,
}
}
}
最后在el-table列表项中添加:
v-if="checkedCities.indexOf('列表项名称') != -1"就可以实现动态控制table列表项了。如:
<el-table-column align="left" sortable="custom" prop="buildingUseType" label="房屋用途"
v-if="checkedCities.indexOf('房屋用途') != -1">
</el-table-column>
更多推荐
已为社区贡献5条内容
所有评论(0)