elementui table 不显示表头_Vue动态控制表格列的显示和隐藏

最新推荐文章于 2024-07-26 08:15:00 发布

weixin_39757040

最新推荐文章于 2024-07-26 08:15:00 发布

阅读量2.1k

点赞数 4

本文介绍了如何使用Vue和ElementUI库来动态控制表格列的显示和隐藏。通过设置`v-if`指令，根据`lists[0].ispass`的值来决定表格列是否显示。当`ispass`为真时，列显示，否则隐藏。同时，文章提到了一个多选框选择机制，用于全选或取消表头，并与`checkList`进行绑定，实现表格列的显示状态同步。

摘要由CSDN通过智能技术生成

效果如图：

勾选表头标题是重复的、为了能看到滚动效果

v-if="lists[0].ispass" 来判断表格列的状态每一列是否显示或隐藏勾选则展示、取消勾选隐藏、默认勾选

<el-dropdown :hide-on-click="false">
            <i class="iconfont icon-shaixuan" ></i>
            <el-dropdown-menu slot="dropdown" >
              <el-scrollbar style="height: 60vh">//作用是数据过多把表单数据的整体高度固定、多出的区域可以下拉展示
                <el-checkbox-group v-model="check">
                  <el-dropdown-item v-for="(item,index) in checkLi