今天记录一下在新项目vue3中,使用的element-plus组价库遇到的一个问题!场景如下:

有一个表格的column绑定的数组对象,我需要对表格的头部实现动态可配置显示表格列,由于绑定的column是一个数组对象,
重点来了,element-plus的文档中label绑定的值新增了object 属性,但实际绑定的对象却不生效无法显示已选中状态,如下

我尝试个各种结果后还是无法显示选中状态,所以我临时更换了一种方案,如下:

不使用 Checkbox-Group 属性,改成使用 el-checkbox ,因为 el-checkbox 支持三种数据类型 string/number/boolean,我们做显示和影藏功能,

自然使用Boolean类型,所以只需要先对数据进行一层遍历,让v-model绑定的是我们对象中的Boolean值就可以实现选中状态!

list是数组对象,也就是我们控制显示列的column数组

1 <template v-for="(item,index) in list" :key="index">
2 <el-checkbox v-model="item.isShow" :label="item.lebel">
3 {{item.label}}
4 </el-checkbox>
5 </template>

// list 为数组对象,需要我们自己去处理一下数据结构,使得能有一个字段能作为选择框选中显示的状态
list = [
  {..., isShow:true },
  {..., isShow:true },
  {..., isShow:true },
]

通过这个方案解决了表格列配置显示隐藏问题,今天只是记录一下工作中遇到的问题

对于element-plus中 el-checkbox-group 的label绑定对象不生效问题,不知道是不是官方生态没有维护好还是我自己使用的问题,希望大家看到能够一起讨论!

【vue3】element-plus,Checkbox-Group多选框之绑定选中数据不选中问题的更多相关文章

  1. ionic-CSS:ionic checkbox(复选框)

    ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...

  2. 在Servlet端获取html页面选中的checkbox值,request获取页面checkbox(复选框)值

    html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...

  3. jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例

    2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...

  4. jquery处理checkbox(复选框)是否被选中

    现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能 ...

  5. checkbox对齐-复选框图标

    checkbox对齐-复选框图标 一般开发过程中,我们直接使用<input type="checkbox"/>这样出现的复选框,设计师一般都说不好看 而让我们按照设计稿 ...

  6. CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  7. jquery如何判断checkbox(复选框)是否被选中(转)

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  8. jQuery实现checkbox(复选框)选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  9. checkbox设置复选框的只读效果不让用户勾选

    在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...

  10. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

随机推荐

  1. 阿里云服务器部署Web环境

    一.配置阿里云服务器 进入阿里云官方网站(https://www.aliyun.com/). 初次使用的话使用支付宝快速注册账户,并进行个人实名认证. 点击试用中心. 选择第二个,云服务器2核4G. ...

  2. TCP和UDP有啥区别?

    TCP全称: Transmission Control Protocol中文名: 传输控制协议解释: 是一种面向连接的.可靠的.基于字节流的传输层通信协议,由IETF的RFC 793定义.用途:TCP ...

  3. HDU3506 Monkey Party (区间DP)

    一道好题...... 首先要将环形转化为线形结构,接着就是标准的区间DP,但这样的话复杂度为O(n3),n<=1000,要超时,所以要考虑优化. dp[i][j]=min( dp[i][k]+d ...

  4. MatrixOne从入门到实战04——MatrixOne的连接和建表

    MatrixOne从入门到实战--MatrixOne的连接和建表 前景回顾 前几篇文章,为大家介绍了MatrixOne这个产品,以及编译.部署MatrixOne的服务. 直通车: MatrixOne从 ...

  5. Docker容器虚拟化

    Docker容器虚拟化 目录 Docker容器虚拟化 虚拟化网络 单节点容器间通信 不同节点容器间通信 虚拟化网络 Network Namespace 是 Linux 内核提供的功能,是实现网络虚拟化 ...

  6. C#中ref和out关键字的应用以及区别

    首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:ref可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...

  7. Vue3解决ElementPlus Drawer或弹出对话框不生效的问题

    第一时间检查你是否还在使用 :visible.sync="drawer" 来绑定事件框的隐藏和显示,vue3.0 已经更改为通过 v-model 来绑定事件框的显示与隐藏.

  8. HTTPS实现原理分析

    概述 在上一节中介绍了两种加密方法 对称加密 非对称加密 其中对称加密性能高,但是有泄露密钥的风险,而非对称加密相反,加密性能较差,但是密钥不易泄露,那么能不能把他们进行一下结合呢? HTTPS采用混 ...

  9. map集合类型/实体类类型的参数

    map集合类型的参数 若mapper接口中的方法需要的参数为多个时,此时可以手动创建map集合, 将这些数据放在map中 只需要通过${}和#{}访问map集合的键就可以获取相对应的值,注意${}需要 ...

  10. 通过 Github Action 实现定时推送天气预报

    偶然间,看到 GitHub Actions 教程:定时发送天气邮件 - 阮一峰的网络日志 这篇文章,没错,这个正好能打发自己的折腾之心,也能通过代码给生活引入一些变化. 还是在这里简单记录一下实现过程 ...