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

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

//置灰

    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"
      >