弄了一個省市縣級聯el-cascader選擇器，發現第二次選擇的時候報異常如下圖
網上看到這個文章完美解決 https://blog.csdn.net/weixin_43043994/article/details/100303097
我是用了加了key，參考如下我對el-cascader二次封裝
<template>
<div class="definition-cascader">
<el-cascader
:key="isRescourceShow"
v-model="valueFromFather"
style="width:100%"
:options="unitData"
:props="propsFromFather"
:placeholder="placeholder"
:size="size"
:filterable="filterable"
:clearable="clearable"
:show-all-levels="false"
:filter-method="filterMethod"
@change="onChange"
></el-cascader>
</div>
</template>
<script>
export default {
name: 'DefinitionCascader',
props: {
// source: {
// type: String,
// required: true
// },
props: {
type: Object,
default() {
return {
multiple: false,
checkStrictly: true,
value: 'id',
label: 'fullname'
}
}
},
placeholder: {
type: String,
default: '請選擇發起單位'
},
unitData: Array,
value: {
type: [String, Number, Array],
default: ''
},
checkStrictly: {
type: Boolean,
default: true
},
mustSearchKeyword: {
type: Boolean,
default: false
},
size: {
type: String,
default: 'small'
},
clearable: {
ype: Boolean,
default: true
},
filterable: {
type: Boolean,
default: true
},
},
data() {
return {
searchKeyword: '',
isRescourceShow: 0,
valueFromFather: this.value,
propsFromFather: this.props
}
},
watch: {
value(v) {
this.valueFromFather = v
},
unitData(){
++this.isRescourceShow
}
},
methods: {
onChange(v) {
this.$emit('input', v)
},
filterMethod(node, keyword) {
return node.text.includes(keyword) || keyword.includes(node.text)
}
}
}
</script>
<style>
.el-input__inner{
padding: 0 8px;
}
.el-cascader-menu__wrap {
height: 300px;
}
</style>