今天记录一下在新项目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. Linux下从零开始创建lvm虚拟磁盘阵列+脚本化解决方案

    逻辑卷管理器(英语:Logical Volume Manager,缩写为LVM),又译为逻辑卷宗管理器.逻辑扇区管理器.逻辑磁盘管理器,是Linux核心所提供的逻辑卷管理(Logical volume ...

  2. nginx进程所属用户问题讨论

    结论 1,在非root账户下启动时,nignx的master和worker进程的用户都将是这个账户, 2,在root账户下启动时 nignx的master进程是用户是root,worker的用户在co ...

  3. redis监控规则

    其他说明参考host主机监控规则:https://www.cnblogs.com/sanduzxcvbnm/p/13589848.html groups: - name: Redis monitori ...

  4. MiniWord .NET Word模板引擎,藉由Word模板和数据简单、快速生成文件。

    Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 介绍 MiniWord .NET Word模板引擎,藉由Word模板和数据简单.快速生 ...

  5. SQL Server如何精准匹配字符中的字符,绝对匹配。

    举例: 我现在是需要查询这字段里包含1的数据 我如果直接charindex,那么11,12也会被包含. 解决(1): SELECT * FROM ( SELECT '1,2,12,111' AS st ...

  6. HashMap底层原理及jdk1.8源码解读

    一.前言 写在前面:小编码字收集资料花了一天的时间整理出来,对你有帮助一键三连走一波哈,谢谢啦!! HashMap在我们日常开发中可谓经常遇到,HashMap 源码和底层原理在现在面试中是必问的.所以 ...

  7. 通用 HTTP 签名组件的另类实现

    1.初衷 开发中经常需要做一些接口的签名生成和校验工作,最开始的时候都是每个接口去按照约定单独实现,久而久之就变的非常难维护,因此就琢磨怎么能够写了一个比较通用的签名生成工具. 2.思路 采用链式调用 ...

  8. go使用JWT进行跨域认证最全教学

    JWT前言 JWT是JSON Web Token的缩写.JWT本身没有定义任何技术实现,它只是定义了一种基于Token的会话管理的规则,涵盖Token需要包含的标准内容和Token的生成过程. JWT ...

  9. 『现学现忘』Git基础 — 37、标签tag(二)

    目录 5.共享标签 6.删除标签 7.修改标签指定提交的代码 8.标签在.git目录中的位置 9.本文中所使用到的命令 提示:接上一篇文章内容. 5.共享标签 默认情况下,git push 命令并不会 ...

  10. C语言------程设设计入门

    仅供借鉴.仅供借鉴.仅供借鉴(整理了一下大一C语言每个章节的练习题.没得题目.只有程序了) 文章目录 1:程序设计入门 2 .实训目的及要求 3.代码实验(包含运行结果) 4 .实验总结 1:程序设计 ...