标签页

<div id="list-items"> 
<el-form-item label="标签" prop="labelList">
 <el-select
 v-model="labelList" multiple filterable remote reserve-keyword allow-create placeholder="请选择标签" :remote-method="remoteMethod" :loading="loading">
 <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in labels"> </el-option>
 </el-select>
 </el-form-item>
 </div> 

// 标签查询
remoteMethod(query) {
    this.loadings = true;
    if (query) {
        likeQuery(query).then((res)=>{
            if(res.status === 200 || res.status === '200'){
                let allOrds = res.data;
                if(res.data.length>0){
                    let list = allOrds.map(item => { //组装，只需要id和name
                        this.cun.push({id:item.id,name:item.name})
                        return {value: item.name, label: item.name};
                    });
                    this.labels =  list.filter(item => {
                        return item.label.toLowerCase()
                            .indexOf(query.toLowerCase()) > -1;
                    });
                }else{
                    this.cun.push({id:'', name:query})
                    console.log(this.cun);
                }
            }
        })
    } else {
        this.cun.push({id:'', name:query})
        // this.labels = [];
        this.loadings = false;
    }
},

// 处理标签
this.formObj2.labelList = [];
this.cun.forEach((init,index)=>{
    this.labelList.forEach((item ,index)=>{
        if(item === init.name){
            this.formObj2.labelList.push({id:init.id,name:init.name})
        }
    })
})

Tags：

转载：感谢您对YU到边个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源YU到边个人博客”。/web/GIS/2021-01-28/52.html

很赞哦！ ()