【解决el-cascader选择任意级别选项,多次选中同一项时,不触发@change 事件】

问题

• 在使用element-plus的el-cascade 选择任意级别时,只有第一次才会触发@change事件,之后@change事件不触发

解决方法

• 使用v-if 进行销毁重建el-cascader
• 具体代码

<el-cascader
	v-if="showCascadwe"
	:props="CascaderProps"
	v-model="state.qids"
	:options="state.cmOptions"
	placeholder="请选择评价项"
	clearable
	@change="valueChange" >
</el-cascader>

<el-button @click="inputSearch()">搜索</el-button>

//指定树形显示参数
const CascaderProps = {
  label: 'title',
  value: 'ttID',
  checkStrictly: true,
}
//是否显示级联
const showCascadwe = ref(true)

const state = reactive({
	//绑定的数组
	qids: [],
	//数组
	cmOptions: [],
})

//cascader改变事件
const valueChange = (e: any) => {
	if (e) {
		let newArr = JSON.parse(JSON.stringify(e))
		queryParams.QID = newArr.pop()
	} else {
		queryParams.QID = ''
	}
}

// 搜索(使用nextTick)
const inputSearch = (val: any) => {
	showCascadwe.value = false
	//调用接口方法
	getList(val)
	nextTick(() => {
		showCascadwe.value = true
	})
}