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()
