vue+antd的树形选择器符合条件的选项禁用

最新推荐文章于 2024-03-15 08:30:00 发布

原创最新推荐文章于 2024-03-15 08:30:00 发布 · 949 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这段代码展示了如何通过遍历和操作数组来对树形选择器中的选项进行禁用和添加灰色样式。根据数据状态(dataStatus)和审核状态(auditStatus)，符合条件的选项会被设置为灰色或禁用。

树形选择器选项是便利的数字对象,那么我可操作数组从而来达到符合条件的选项禁用,话不多说上代码

//置灰

    setGray() {

      let that = this,

        list = [...that.options]

      let getIds = function (list) {

        list.forEach((k) => {

          if (k.children && k.children.length > 0) {

            k.children.forEach((e) => {

              if (['1', '2', '3', '4', '5', '6'].indexOf(e.dataStatus) >= 0) {

                e.class = 'gray'

              } else {

                if ([null, '3', '4'].indexOf(e.auditStatus) >= 0) {

                  e.class = 'gray'

                }

              }

            })

          }

        })

      }

      getIds(list)

      that.options = [...list]

    },

  //禁用

    setDisabled() {

      let that = this,

        list = [...that.options]

      let getIds = function (list) {

        list.forEach((k) => {

          if (k.childList && k.childList.length > 0) {

            k.children.forEach((e) => {

              if (['1', '2', '3', '4', '5', '6'].indexOf(e.dataStatus) >= 0) {

                e.disabled = true

              } else {

                if ([null, '3', '4'].indexOf(e.auditStatus) >= 0) {

                  e.disabled = true

                }

              }

            })

          }

        })

      }

      getIds(list)

      that.options = [...list]

    },

上面就是将符合条件的数据状态dataStatus或者审核状态auditStatus符合条件的加上class类目gray和disabled属性,

然后我们再a-tree-select的标签中操作即可

<a-tree-select-node
        v-show="items.children"
        v-for="item in items.children"
        :key="item.id"
        :value="item.id"
        :title="item.label"
        :selectable="item.children?false:true"
        :disabled="item.class!=undefined"
      >