级联选择器是真的难倒我了,弄了很久要么就是没有数据要么就是子数据出不来,后来请教了一下师兄,也看了很多博文,勉强把显示做了出来
组件部分:
<el-cascader placeholder="请选择分类" v-model="tableQuery.id" @keyup.enter.native="search" :options="options"
:props="optionProps" clearable ref="cascaderAddr" @change="handleChange">
</el-cascader>
js部分:
export default {
data() {
return {
optionProps: {
value: "id",
label: "typeName",
children: "children",//这里最好要后台返回树形数据
checkStrictly: true,
},
options: [],
}
}
},
mounted() {
this.handleChange();
},
method:{
handleChange() {
getType(this.tableQuery2)//这里是我自己要用到接口和请求数据
.then((res) => {
res.obj.forEach((item, index) => {
item.removeLoading = false;
});
this.options = translateDataToTree(res.obj);
//我的后台没有按照树形数据返回,所以这里用了转换方法进行处理,有点点麻烦。如果后台是树形数据,就是 this.options = res.obj;
})
.finally(() => {
this.tableLoading = false;
});
},
}