今天遇到了一个需求Cascader级联选择器,选中后下拉框自动关闭,给组件挂一个ref,@change里面用togglePopperVisible()就可以自动关闭,但是现在我的级联选择器是在v-for循环的列表里面,而且列表是动态变化的,那么以上的方法就会变得不明确。所以要从单个绑定获取多个 ref:
<!-- 表内容 -->
<tr v-for="(item, index) in table.list" :key="index">
<!-- 选择器 -->
<el-cascader
:ref="setItemRef" //重要
:id="index"
v-model="item.subjectArr"
prop="fundType"
@change="table.myChange(index)" //重要
filterable
:props="{ checkStrictly: true }"
:options="data.fundTypeList"
/>
js代码
const setItemRef = el => {
console.log(el)
if (el) {
itemRefs.push(el)
console.log(itemRefs)
}
}
选中的方法
myChange(index) {
itemRefs[index].togglePopperVisible()
}
onBeforeUpdate(() => {
itemRefs = []
});
最后别忘了return setItemRef哦