• 【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绑定对象不生效问题,不知道是不是官方生态没有维护好还是我自己使用的问题,希望大家看到能够一起讨论!

     

  • 相关阅读:
    Python ArcPy批量掩膜、重采样大量遥感影像
    用qt编译qmake
    RestTemplate源码解析
    termux使用
    2023年【四川省安全员A证】考试资料及四川省安全员A证考试试卷
    设计原则之-单一职责原则
    时间溯源的系统设计思路
    RK3399平台开发系列讲解(PCI/PCI-E)5.51、PCIE EP模式软件架构
    PHP 写的旅游景点系统
    数学建模--Subplot绘图的Python实现
  • 原文地址:https://www.cnblogs.com/leng12/p/16955800.html