vue2下拉框组件使用技巧

1、ant design 下拉框组件--单选

          <span style="font-size: 14px;">污水厂</span>
          <a-select :defaultValue="factorySelectedValue" v-model="factorySelectedValue" style="width:200px;margin-left:10px" @change="factoryChange">
            <a-select-option :value="item.xh" v-for="(item,i)  in factoryArr" :key="item.xh">
              <span v-html="item.name"></span>
            </a-select-option>
          </a-select>

使用建议1：使用v-model进行默认值绑定，defaultValue在vue3的版本中已经被淘汰了。

使用建议2：change事件返回参数是选择项目的value，因此可以将数组下标给value，方便数组对象的选择和切换

          factorySelectedValue:"",//工厂中文名称
          factorySelectedXh:0,//工厂序号-数组下标
          factoryArr:null,//工厂数组

factoryChange(e){//工厂切换
        this.factorySelectedXh = e;
        this.factorySelectedValue=systemSet.factoryArr[e].name;
}

2、ant design 下拉框组件--多选

mode="tags"就变成多选框了
多选框就不用把数组下标给value了，一般情况给对象代码，视情况而定

          <span style="font-size: 14px;margin-left: 10px;">敏感点</span>
          <a-select mode="tags" ref="sensitive" :defaultValue="sensitiveSelectedIdArr" v-model="sensitiveSelectedIdArr" :maxTagCount="3"   @change="sensitiveChange" style="width: 400px;margin-left:10px;">
            <a-select-option :value='item.id' v-for="(item,i) in sensitiveArr" :key="i">{{item.label}}</a-select-option>
          </a-select>

          sensitiveSelectedIdArr:[],
          sensitiveSelectedIdStr:'',
          sensitiveArr:[],

       sensitiveChange(e){
        let str = ''//e是选择的id的数组
        if(e.length>0)
        {
          e.map(item=>{
            str+= `${item},`;
          })
          this.sensitiveSelectedIdArr =e;//id的数组
          this.sensitiveSelectedIdStr=str.substring(0,str.length-1);
          this.mapSensitiveChange();
        }
      },