规则:默认选中的某项内容在数据源的json里面不能被
chilren
数组包含,也就是说默认选中的某项内容必须是数据源的直接子元素
。例如如下例子中,districtDefault: ["东城区"]
是没有效果的;而districtDefault: ["CoderZb"]
是有效果的。所以如果你想要默认选中某项内容,只需将默认选中的内容作为数据源的直接子元素即可
。
以下以vue项目为例。默认选中不限
- 步骤一:首先引入elementUI Cascader
import {Carousel} from 'element-ui';
- 步骤二:嵌入
el-cascader
标签
<el-cascader
v-model="districtDefault"
:options="pcaData"
@change="handleChange"
></el-cascader>
- 步骤三:逻辑处理。
显示效果
:显示的文字为"不限",选中后输入的内容为"CoderZb"
export default {
data() {
return {
districtDefault: ["CoderZb"], // 默认地区为不限。显示的文字为"不限",选中后输入的内容为"CoderZb"
pcaData: [
{ value: "CoderZb", label: "不限" },
{
value: "北京市",
label: "北京市",
id: "1",
children: [
{
value: "北京市",
label: "北京市",
id: "5025",
children: [
{ value: "东城区", label: "东城区" },
{ value: "西城区", label: "西城区" },
{ value: "朝阳区", label: "朝阳区" },
{ value: "丰台区", label: "丰台区" },
{ value: "石景山区", label: "石景山区" },
{ value: "海淀区", label: "海淀区" },
{ value: "门头沟区", label: "门头沟区" },
{ value: "房山区", label: "房山区" },
{ value: "通州区", label: "通州区" },
{ value: "顺义区", label: "顺义区" },
{ value: "昌平区", label: "昌平区" },
{ value: "大兴区", label: "大兴区" },
{ value: "怀柔区", label: "怀柔区" },
{ value: "平谷区", label: "平谷区" }
]
}
]
}
],
}
},
methods: {
// 地区选择后数据的回调
handleChange(value) {
// this.districtNames = value.join(",");
this.districtNames = value[value.length - 1];
console.log(value);
},
}
};
- 步骤四:显示效果。
- 步骤五:控制台输出log验证步骤三的
显示效果