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];
            });
        }
    }
});

posted on 2022-07-22 11:46 小虾米吖~ 阅读(344) 评论(0) 编辑收藏举报