问题:
解决方法:
在数据初始化的时候将获取到的数据做进一步的处理,进行本地select组件的一个添加
const labels = [];const values = [];res.data.rows.forEach((ele) => {labels.push(ele.buildName);values.push(ele.buildCode);});this.$refs.select.cachedOptions = labels.map((label, index) => ({currentLabel: label, //当前绑定的数据的labelcurrentValue: values[index], //当前绑定数据的valuelabel, //当前绑定的数据的labelvalue: values[index], //当前绑定数据的value}));
参考资料:
<el-select ref="selectDom" v-model="form.diagnosisIds" :remote-method="remoteMethod" placeholder="请选择" clearable filterable multiple remote @visible-change="templateTagChange"><el-optionv-for="item in relationList":key="item.id":label="item.name":value="item.id"/>
</el-select><script> export default {data: {return {form: {diagnosisIds: [] // v-model 中绑定的值},relationList: [] // 下拉框的数据}},methods: {// 远程搜索方法,数据太多,不能直接渲染remoteMethod(query) {if (query !== '') {this.relationList = []this.loading = true// 这个方法可以做下节流处理,不需要一输入就发起请求,这里偷懒没有写getDiagnoseInfo({ diagnoseName: query }).then(res => {this.loading = falsethis.relationList = res.filter(item => {return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1})})} else {this.relationList = []}},// 诊断选择器下拉框隐藏时触发事件,清空数据templateTagChange(val) {if (val === false) {this.relationList = []}}}
} </script>
const ids = [] // 专门用来存放选项id的数据
const strs = [] // 专门用来存放选项name的数据
// res.tagMapList 为接口返回的id与name的集合数据
res.tagMapList.forEach(ele => {ids.push(ele.id)strs.push(ele.value)
})
for (let i = 0; i < strs.length; i++) {this.form.diagnosisIds.push(ids[i]) // 给选择器v-model赋值,由于是支持多选的,所以会是一个数据// 给选择器的选项赋值,接可以自己匹配上name了this.relationList.push({id: ids[i],name: strs[i]})
const ids = []
const strs = []
res.tagMapList.forEach(ele => {ids.push(ele.id)strs.push(ele.value)
})
for (let i = 0; i < strs.length; i++) {this.form.diagnosisIds.push(ids[i])this.$refs.selectDom.cachedOptions.push({currentLabel: strs[i],currentValue: ids[i],label: strs[i],value: ids[i]})
}
参考链接:
-
https://blog.csdn.net/weixin_53312997/article/details/124983389?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-1-124983389-blog-125002466.235v43pc_blog_bottom_relevance_base8&spm=1001.2101.3001.4242.2&utm_relevant_index=4
-
https://www.jianshu.com/p/7dfcc05a419f