【vue3】element-plus,Checkbox-Group多选框之绑定选中数据不选中问题
今天记录一下在新项目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多选框之绑定选中数据不选中问题的更多相关文章
- ionic-CSS:ionic checkbox(复选框)
ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...
- 在Servlet端获取html页面选中的checkbox值,request获取页面checkbox(复选框)值
html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
2015年12月21日 10:52:51 星期一 目标, 点击当前的checbox, 判断点击后当前checkbox是否是选中状态. html: <input type="checkb ...
- jquery处理checkbox(复选框)是否被选中
现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能 ...
- checkbox对齐-复选框图标
checkbox对齐-复选框图标 一般开发过程中,我们直接使用<input type="checkbox"/>这样出现的复选框,设计师一般都说不好看 而让我们按照设计稿 ...
- CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...
- jquery如何判断checkbox(复选框)是否被选中(转)
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- jQuery实现checkbox(复选框)选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- checkbox设置复选框的只读效果不让用户勾选
在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...
- CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...
随机推荐
- Mapping
dynamic针对的是新增的字段,不是对mapping中已有的字段 (原有mapping中的字段不受影响,只影响新增的字段) 当dynamic被设置成false的时候,存在新增字段可以被写入到索引文件 ...
- 2_Servlet
一. 引言 1.1 C/S架构和B/S架构 C/S 和B/S是软件发展过程中出现的两种软件架构方式 1.2 C/S架构(Client/Server 客户端/服务器) 特点: 必须在客户端安装特定软件 ...
- 第三周python作业
import datetime mot = ["今天星期一:\n坚持下去不是因为我很坚强,而是因为我别无选择.", "今天星期二:\n含泪播种的人一定会笑着收." ...
- Linux+Wine玩GTA5指南
如果你的系统没有Wine先装Wine和winetricks,Wine在各大发行版的源都能找到.记住32位和64位的Wine都要装 安装wget后,输入指令 sudo -s cd /opt mkdir ...
- Python编程之多进程(multiprocessing)详解
引言 multiprocessing是一个用于产生多进程的包,与threading模块的API类似.multiprocessing既可以实现本地的多进程,也可以实现远程的多进程.通过使用多个子进程而非 ...
- Docker | 制作tomcat镜像并部署项目
本文讲解如何制作自己的tomcat镜像,并使用tomcat部署项目 原料准备: tomcat.jdk安装包,dockerfile文件 步骤 1.准备压缩包 jdk-8u301-linux-x64.ta ...
- 非Navicat破解延长14天试用时间
延长Navicat使用时长 Navicat作为一套多连接数据库开发工具,十分好用,购买正版太过昂贵,破解版过于麻烦,有时候还会有安全问题,好在我们有14天的试用时间,我们可以从这个方面入手 对于有能力 ...
- 拉格朗日插值优化DP
拉格朗日插值优化DP 模拟赛出现神秘插值,太难啦!! 回忆拉格朗日插值是用来做什么的 对于一个多项式\(F(x)\),如果已知它的次数为\(m - 1\),且已知\(m\)个点值,那么可以得到 \[F ...
- Java注解(3):一个真实Elasticsearch案例
学会了技术就要使用,否则很容易忘记,因为自然界压根就不存在什么代码.变量之类的玩意,这都是一些和生活常识格格不入的东西.只能多用多练,形成肌肉记忆才行. 在一次实际的产品开发中,由于业务需求的缘故,需 ...
- laravel 报错 AUTH` failed: ERR Client sent AUTH, but no password is set
明明没有设置redis密码.访问时候却报错 在代码里面的databases.php 改成这样就可以了.predis新版也会有取不到passwor的时候.改成我截图那样也可以.他默认取的是default ...