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(); } },