el-cascader級聯選擇器，選擇父節點勾選子節點，取消子節點不影響父節點

1.引入vue、element-ui

	// html
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <!-- 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入組件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.建立一個掛載節

<div id="app"></div>

3.創建一個vue實例

new Vue({
      el: '#app',
      template: 
      `<div id="app">
        <el-cascader
		  ref="elCascader"
          v-model="checked"
          :options="options"
          :props="defaultProps"
          @change="handleChange">
        </el-cascader>
      </div>`,
      data() {
        return {
          checked: '',
          defaultProps: {
            multiple: true,
            checkStrictly: true,
          },
          options: [...] // elementui官網數據
        }
      },
      methods: {
        handleChange(val) {
          console.log(val)
        },
      },
    })

然后打開就可以運行了(可能要在服務器內運行)。這時進行選擇發現打印的為父子id組成的二維數組

[
 ['zhinan', 'shejiyuanze', 'yizhi', __ob__: we],
 ['zhinan', 'shejiyuanze', 'fankui', __ob__: we]
]

設置 defaultProps 中的 emitPath 為 false，就變成了當前選擇的id組成的一維數組。

['zhinan', 'shejiyuanze', 'yizhi', 'fankui', 'daohang']

看了一下文檔，似乎並沒有返回當前操作的id這個方法，於是手動監聽checked的變化來拿到當前操作的id。

深度監聽checked的變化

	// watch
      watch: {
        checked: {
          handler(newArr, oldArr) {
            const current = this.findCurrentDepartment(newArr, oldArr)
            if (!current) return
          },
          deep: true,
        },
      },
          
// methods
findCurrentDepartment(newArr, oldArr) {
    const catchNewArr = [...newArr]
    const catchOldArr = [...oldArr]
    if (catchNewArr.length > catchOldArr.length) {
        console.log('為添加')
        for (let i = 0; i < catchNewArr.length; i++) {
            const targetIndex = catchOldArr.indexOf(catchNewArr[i])
            if (targetIndex === -1) {
                return {
                    value: catchNewArr[i],
                    type: 'checked',
                }
            }
        }
    } else {
        console.log('為取消')
        for (let i = 0; i < catchOldArr.length; i++) {
            const targetIndex = catchNewArr.indexOf(catchOldArr[i])
            if (targetIndex === -1) {
                return {
                    value: catchOldArr[i],
                    type: 'cancel',
                }
            }
        }
    }
},

這樣就拿到了當前操作的id、操作的類型，然后繼續在watch checked里面操作。

checked: {
    handler(newArr, oldArr) {
        const current = this.findCurrentDepartment(newArr, oldArr)
        if (!current) return
        this.$nextTick(() => {
            if (current.type === 'checked') {
                // 從級聯選擇器中取出內部的節點數組，找到當前節點
                const targetNode = this.$refs.elCascader.checkedNodes.find((item) => {
                    return item.value === current.value
                })
                if (targetNode) {
                    // 遞歸找出所有子孫節點，並手動勾選
                    this.checkedChildrenDepartment([targetNode])
                    // 更新視圖
                    this.$refs.elCascader.$refs.panel.calculateMultiCheckedValue()
                }
            }else if (current.type === "cancel") {
                // ....
            }
        })
    },
        deep: true,
},

這樣就大功告成了。

最后，這行代碼可以清除所有級聯選擇器的選中狀態

this.$refs.elCascader.$refs.panel.clearCheckedNodes()

完整代碼 https://github.com/kui913941251/el-cascader-checked