50

element el-select多选怎么做到二级甚至三级联动?

这个代码能单选联动、但是多选的话、二级选项框就会没数据、求大神搭救!!!

html代码:

<el-form :inline="true">
    <el-form-item label="选择地区:">
        <el-select size="small" style="width: 100px"
            multiple
            v-model="selectProv"
            placeholder="请选择省份"
            @change="getProv($event)">
            <el-option
              v-for="item in provs"
              :key="item.id"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select size="small" style="width: 100px"
            v-if="selectProv!=''"
            multiple
            v-model="selectCity"
            placeholder="请选择城市">
            <el-option
              v-for="item in citys"
              :key="item.id"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

js:这里只放广东省的二级联动城市(自己的代码有全城市的、因为太长了就不全放出来了)

export default {
  data () {
    return {
      provs:[{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:"江西省",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:"甘肃省",value:"甘肃省"},
        {label:"青海省",value:"青海省"},
        {label:"宁夏回族自治区",value:"宁夏回族自治区"},
        {label:"新疆维吾尔自治区",value:"新疆维吾尔自治区"},
        {label:"台湾省",value:"台湾省"},
        {label:"香港特别行政区",value:"香港特别行政区"},
        {label:"澳门特别行政区",value:"澳门特别行政区"}] ,
      citys: [],
      selectProv: [],//省份最终勾选数据
      selectCity: [],//城市最终勾选数据
      // selectArea: [],//区/县最终勾选数据
    }
  },
  methods: {
    getProv: function (provs) {
      let tempCity=[];
      this.citys=[];
      this.selectCity=[];
      let allCity=[
        {
          prov: "广东省",
          label: "广州市"
        }, {
          prov: "广东省",
          label: "韶关市"
        }, {
          prov: "广东省",
          label: "深圳市"
        }, {
          prov: "广东省",
          label: "珠海市"
        }, {
          prov: "广东省",
          label: "汕头市"
        }, {
          prov: "广东省",
          label: "佛山市"
        }, {
          prov: "广东省",
          label: "江门市"
        }, {
          prov: "广东省",
          label: "湛江市"
        }, {
          prov: "广东省",
          label: "茂名市"
        }, {
          prov: "广东省",
          label: "肇庆市"
        }, {
          prov: "广东省",
          label: "惠州市"
        }, {
          prov: "广东省",
          label: "梅州市"
        }, {
          prov: "广东省",
          label: "汕尾市"
        }, {
          prov: "广东省",
          label: "河源市"
        }, {
          prov: "广东省",
          label: "阳江市"
        }, {
          prov: "广东省",
          label: "清远市"
        }, {
          prov: "广东省",
          label: "东莞市"
        }, {
          prov: "广东省",
          label: "中山市"
        }, {
          prov: "广东省",
          label: "潮州市"
        }, {
          prov: "广东省",
          label: "揭阳市"
        }, {
          prov: "广东省",
          label: "云浮市"
        }, 
          ];
       for (var val of allCity){
          if (provs == val.prov){
            console.log(val);
            tempCity.push({label: val.label, value: val.label})
          }
        }
      this.citys = tempCity;
    },
  }
}

怎么才能做到多选的二级联动呢、求大神搭救吖!!!

查看全部
qq_33527292
小白白白白影
2020/11/26 20:36
  • html5
  • vue.js
  • iot
  • 点赞
  • 收藏
  • 回答
    私信

2个回复