vue element ui的el-checkbox的列表选择问题

原创
2020/11/05 18:26
阅读数 2.2K
          <el-row :gutter="24">
            <el-col :span="6" :key="item.id" v-for="item in storeList" style="margin-bottom:20px;">
              <el-checkbox
                :label="item.name"
                
                :checked="item.checked"
                @change="changeOne(item)"
                border
              ></el-checkbox>
            </el-col>
          </el-row>

一、vue  element ui的el-checkbox的列表选择问题

通过循环, 给数据添加checked属性,并绑定到v-model上,来实现 一的场景时候,选择操作失效。

 

解决方案:

1.在读取到列表后,使用map() 处理数据增加属性访问器

2. 在change事件中自定义修改 选中后逻辑

 var link = url.getStore("GetAllStore");
      $.get(link, params, (data) => {
        _this.loading = false;

        data.map((item) => {
          item.checked = getIsCheck(item.id);
          return item;
        });
        _this.storeList = data;
      });

      //判断是否选中
      function getIsCheck(id) {
        var list = _this.storeidList;
        for (var i = 0; i < list.length; i++) {
          var item = list[i];
          if (item == id) return true;
        }
        return false;
      }
    changeOne: function (item) {
      item.checked = !item.checked;
    },

 

打印列表后:

 

 

更多:

 vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本(转)

 ElementUI日期组件错误, TypeError: date.getFullYear is not a function

 Vue中ios系统浏览器下select标签第一个无法选中

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部