element-ui框架，使用Cascader级联选择器组件实现 默认选中某项内容

规则：默认选中的某项内容在数据源的json里面不能被chilren数组包含，也就是说默认选中的某项内容必须是数据源的直接子元素。例如如下例子中，districtDefault: ["东城区"]是没有效果的;而districtDefault: ["CoderZb"]是有效果的。所以如果你想要默认选中某项内容，只需将默认选中的内容作为数据源的直接子元素即可。

以下以vue项目为例。默认选中不限

• 步骤一：首先引入elementUI Cascader

import {Carousel} from 'element-ui'; 

• 步骤二：嵌入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);
    },
}

};

• 步骤四：显示效果。
  
  image.png
  
  
  image.png
• 步骤五：控制台输出log验证步骤三的显示效果

image.png