iview 通过多选框动态控制<Table>列数

本文介绍了一个使用Vue.js实现的功能,通过多选框控制表格列的显示与隐藏。当多选框被选中时,对应列会显示;未选中时,列将被隐藏。示例代码提供了实现这一功能的JavaScript片段,适用于需要类似功能的开发者。
摘要由CSDN通过智能技术生成

首先说需求
1.通过多选框是否选中来控制表格对应的列是否显示,
默认选中全部显示,未选中隐藏,如下图未选中时
默认为选择的情况

上代码

	 <template>
	   <div class="function_list">
          <Button icon="md-search"></Button>
          <Button icon="md-sync"></Button>
          <Button icon="ios-list-box"></Button>
          <Button icon="ios-apps">
            <!-- 下拉框多选 -->
            <Dropdown trigger="click" style="margin-left: 20px">
              <Icon type="md-arrow-dropdown" />
              <DropdownMenu slot="list">
                <CheckboxGroup
                  @on-change="checkAllGroupChange($event,index)"
                  v-for="(item,index) of checkAllGroup"
                  :key="index"
                  v-model="checkAllGroup1"
                >
                  <Checkbox :label="item">&
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值