记录一个element-ui级联单选功能

产品提了个需求，级联第一级能选多个，第一级的子级每个只能选一个，也就是一级多选，二级单选。看了下element的文档也没用相关设置，只能搞下change方法了。

首先，用getCheckedNodes(true)获取所有选中的node，遍历node找父级，再找到最后一个点击的node，记录下来，就搞定了。

但发现行不通，返回值不是根据点击顺序返回的，而是根据列表顺序，头大啊。

再来！

更换方法，先判断是否是新的值，新的存起来，旧的替换掉。完成后保存起来，用来下次判断。

changeConfig2(currentValues, form) {
      this.$nextTick(() => {
        // 选中项是否是新的值
        const newValue = currentValues.find(
          val => !this.preSelectedValues.includes(val)
        )
        console.log('newValue', newValue)
        let ref = this.$refs.ruleForm1.$refs.cascaderRef2
        if (newValue) {
          let nodes = ref.getCheckedNodes(true)
          let node = nodes.find(it => it.value === newValue)
          // console.log('node', node, ref)
          if (node) {
            let pid = node.parent.value
            this.selectValue[pid] = node.value
            let ids = Object.values(this.selectValue)
            this.preSelectedValues = ids
          }
        } else {
          this.preSelectedValues = currentValues
        }
      })
    },

方法很好，成功了一半！

又冒出个问题，选中项主动更新后会刷新面板，二级数据的面板被更新成第一条数据的二级面板了，还得改。

changeConfig2(currentValues, form) {
      this.$nextTick(() => {
        const newValue = currentValues.find(
          val => !this.preSelectedValues.includes(val)
        )
        console.log('newValue', newValue)
        let ref = this.$refs.ruleForm1.$refs.cascaderRef2
        if (newValue) {
          let nodes = ref.getCheckedNodes(true)
          let node = nodes.find(it => it.value === newValue)
          // console.log('node', node, ref)
          if (node) {
            let pid = node.parent.value
            this.selectValue[pid] = node.value
            let ids = Object.values(this.selectValue)
            this.preSelectedValues = ids
            this.$nextTick(() => {
              // 设置当前面板的路径，这里居然是个node数组
              ref.$refs.panel.activePath = [node.parent]
              // 同步一下
              ref.$refs.panel.syncActivePath?.()
            })
          }
        } else {
          this.preSelectedValues = currentValues
        }
      })
    },

终于完成了，就是感到比较奇怪，勾选的时候需要重新设置，取消勾选却不需要......

最后还有个问题，关闭弹框就报错，但不影响功能，哎