el-select下拉多选- 追加对应的dom（不影响编辑回显）
若是编辑回显的数据和需要追加的dom格式数据一致，则无需这么麻烦，下面的实现方式是回显的数据和追加使用的数据格式不一样，需要判断后转换为能用的数据格式：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div id="position_form">
<el-select v-model="positionForm.label"
multiple
:multiple-limit="3"
placeholder="请选择"
@change="changeIndustryLabel">
<el-option
v-for="(item,index) in positionForm.industryTags"
:key="index"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<table>
<tbody>
<tr v-for="(item,index) in positionForm.savedList" :key="index">
<td>{{item.config_name?item.config_name:''}}</td>
<td><input :value="item.combo_config_id"></td>
<td><input :value="item.name?item.name:''"></td>
<td><input :value="item.price?item.price:''"></td>
<td><input :value="item.unit?item.unit:''"></td>
<td><input :value="item.title?item.title:''"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/select.js"></script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div id="position_form">
<el-select v-model="positionForm.label"
multiple
:multiple-limit="3"
placeholder="请选择"
@change="changeIndustryLabel">
<el-option
v-for="(item,index) in positionForm.industryTags"
:key="index"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<table>
<tbody>
<tr v-for="(item,index) in positionForm.savedList" :key="index">
<td>{{item.config_name?item.config_name:''}}</td>
<td><input :value="item.combo_config_id"></td>
<td><input :value="item.name?item.name:''"></td>
<td><input :value="item.price?item.price:''"></td>
<td><input :value="item.unit?item.unit:''"></td>
<td><input :value="item.title?item.title:''"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/select.js"></script>
</html>
核心js
new Vue({
el: '#position_form',
data: {
positionForm:{
label:[],
industryTags:[ // 下拉选项追加dom要用的数据
{
create_admin_id: 1,
create_time: 1654840192,
flag: "",
id: 1,
name: "CRM系统",
remark: "对对对",
status: 1,
update_admin_id: 1,
update_time: 1657252715,
},
{
create_admin_id: 1,
create_time: 1654840192,
flag: "",
id: 2,
name: "配置",
remark: "对对对",
status: 1,
update_admin_id: 1,
update_time: 1657252715,
}
],
savedList:[ // 回显数据已有格式
{
combo_config_id: 1,
combo_id: 6,
config_name: "CRM系统",
count: 999999,
create_admin_id: 1,
create_time: 1657252833,
flag: null,
id: 6,
price: "5000.00",
remark: null,
status: 1,
title: "crm_status",
unit: "",
update_admin_id: 1,
update_time: 1657252833,
value: "1"
}
]
}
},
created(){
this.initTable();
},
methods:{
initTable(){
let _this = this;
_this.positionForm.savedList.forEach((item)=>{
_this.positionForm.label.push(item.combo_config_id);
})
},
changeIndustryLabel(e){
let _this = this;
_this.positionForm.label = e;
/*已有的需要原样显示的部分*/
const tags = _this.positionForm.savedList.map(e => e.combo_config_id);
let tags_filtered = _this.positionForm.industryTags.filter(e => !tags.includes(e.id));
/*新增时可以push的部分*/
if(tags_filtered.length>0){
tags_filtered.forEach((item)=>{
_this.positionForm.label.forEach((item_id)=>{
if(item.id == item_id){
let obj = {
combo_config_id:item.id,
config_name:item.name,
price:'',
unit:'',
title:''
}
_this.positionForm.savedList.push(obj);
}
})
})
}
let tags_filtered_push = _this.positionForm.savedList.filter(e => !_this.positionForm.label.includes(e.combo_config_id)); // 取消选中时要删除追加的dom
_this.positionForm.savedList = _this.positionForm.savedList.filter((i) => {
return i != tags_filtered_push[0];
});
}
}
});
本文来自博客园，作者：小虾米吖~，转载请注明原文链接：https://www.cnblogs.com/LindaBlog/p/16505219.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
2020-07-22 uniapp中token存储和清除——vueX