码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 【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 

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

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

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

     

  • 相关阅读:
    linux 下MySQL本地安装mysql - u root - p 无法登入
    数据结构练习&插入数据
    【50关于Visual Studio 2019控制台输出中文出现乱码问题及解决办法】
    一文带你快速了解Python史上最快Web框架
    设计模式-享元模式
    vue-创建项目
    【语义分割】13、SegNeXt | 只要卷积用得好 提升语义分割没烦恼
    TIDB - 分布式数据库
    深度学习之 7 深度前馈网络
    c#中的接口
  • 原文地址:https://www.cnblogs.com/leng12/p/16955800.html
  • 最新文章
  • 【JVM】编译执行与解释执行的区别是什么?JVM 使用哪种方式?
    用 Hashids 优雅解决 C 端自增 ID 暴露问题
    V8引擎 精品漫游指南--Ignition篇(上) 指令 栈帧 槽位 调用约定 内存布局 基础内容
    LLVM Pass快速入门(四):代码插桩
    milkup:桌面端 markdown AI续写和即时渲染
    基于项目工程构建SBOM(软件物料清单)的研究
    鸿蒙应用开发UI基础第二节:鸿蒙应用程序框架核心解析与实操
    .NET 中如何快速实现 List 集合去重?
    扣子Coze实战:从0到1打造抖音+小红书热点监控智能体
    浅谈数据访问层
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
小工具 小游戏
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1

京公网安备 11010502049817号