iview Table 动态增加 _disabled 禁用

最新推荐文章于 2024-03-29 10:12:50 发布

原创最新推荐文章于 2024-03-29 10:12:50 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #vue.js #前端

本文介绍如何使用JavaScript的findIndex方法在已选数据中查找并标记数组中匹配项的禁用状态，通过示例展示了如何在接口返回的tableData中根据couponId进行操作。

已经选择的数据

数据返回值，有相同的就禁用

用到 findIndex() 方法

findIndex() 方法为数组中的每个元素都调用一次函数执行：

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。

已下是代码块

          //接口返回的数据
          res.tableData.forEach(e => {
              //已经选择的数据
              this.formValidate.couponList.forEach(i => {
                  if (e.id == i.couponId) {
                       //拿到ID相同的索引
                       let index = res.tableData.findIndex(inx => {
                          return i.couponId === inx.id;
                        });
                      //给数据加上  _disabled  true 为禁用
                      this.chooseCouponsData.couponsList[index]['_disabled'] = true;
                  }
                 this.chooseCouponsData.couponsList = res.tableData;
              });
          });