iview 和 elementUI实现表格列的自定义，包括选择性展示或隐藏

最新推荐文章于 2023-02-17 15:28:28 发布

木头没有瓜

最新推荐文章于 2023-02-17 15:28:28 发布

阅读量5.6k

点赞数 1

分类专栏： iview

本文链接：https://blog.csdn.net/weixin_40918145/article/details/82219133

版权

iview 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、由于iview和elementUI中，都没有支持列选择性展示或者隐藏，选择项为竖列，如boostrap Table中，又懒得自己写样式代码，于是乎，本人将上述两种结合起来，iview的文档中提供了横向多选自定义列的方法，但是出于项目需要，要做成竖着显示，偏偏iview的多选好下拉菜单都是单选，而且是点击之后就会隐藏选项，但是elementUI中el-dropdown :hide-on-click="false"提供了选中选项不收缩方法，废话不多说，关键代码如下

<el-dropdown :hide-on-click="false"  style="float: right; margin-right: 5px;" trigger="click">
            <Button>选项设置<i class="el-icon-arrow-down el-icon--right"></i></Button>
            <el-dropdown-menu slot="dropdown">
                <CheckboxGroup  v-model="tableColumnsCheckedShow" @on-change="changeTableColumns" >
                  <el-dropdown-item v-for="item in tableColumnsList" >
                    <Checkbox :label="item">{{item}}</Checkbox>
                  </el-dropdown-item>
                </CheckboxGroup>
            </el-dropdown-menu>
          </el-dropdown>

附iview自定义列显示https://www.iviewui.com/components/table#API