el-cascader显示默认值
时间: 2023-11-21 20:56:22 浏览: 76
vue el-cascader所需要的省市区街道联动的数据格式
当接口只返回最后一级id时,我们可以通过向上查找所有父级数据,并设置组件el-cascader的默认值来实现el-cascader显示默认值。具体步骤如下:
1.获取所有级别的数据,可以通过接口获取或者在前端定义一个数据源。
2.根据接口返回的最后一级id,向上查找所有父级数据,可以使用递归函数实现。
3.将查找到的所有父级数据按照el-cascader的options数据结构进行组装。
4.将组装好的options数据设置为el-cascader的默认值即可。
下面是一个示例代码,假设我们要设置默认值的级别为省、市、区,数据源为dataSource,最后一级id为lastId:
```javascript
// 递归函数,向上查找所有父级数据
function getParentData(data, id) {
for (let i = 0; i < data.length; i++) {
if (data[i].value === id) {
return [data[i]].concat(getParentData(dataSource, data[i].parentId));
}
}
return [];
}
// 获取所有级别的数据
const provinceData = dataSource.filter(item => item.level === 'province');
const cityData = dataSource.filter(item => item.level === 'city');
const areaData = dataSource.filter(item => item.level === 'area');
// 向上查找所有父级数据
const areaParentData = getParentData(areaData, lastId);
const cityParentData = getParentData(cityData, areaParentData[0].parentId);
const provinceParentData = getParentData(provinceData, cityParentData[0].parentId);
// 组装options数据
const options = [{
value: provinceParentData[0].value,
label: provinceParentData[0].label,
children: [{
value: cityParentData[0].value,
label: cityParentData[0].label,
children: [{
value: areaParentData[0].value,
label: areaParentData[0].label
}]
}]
}];
// 设置el-cascader的默认值
this.$refs.cascaderRef.$emit('input', [provinceParentData[0].value, cityParentData[0].value, areaParentData[0].value]);
this.$refs.cascaderRef.$emit('change', [provinceParentData[0].value, cityParentData[0].value, areaParentData[0].value]);
```
阅读全文