vue實現(xiàn)下拉框的多選功能(附后端處理參數(shù))

更新時間：2023年08月08日 10:19:51 作者：【金融科技螞蟻】

本文介紹了如何使用Vue實現(xiàn)下拉框的多選功能,實現(xiàn)了在選擇框中選擇多個選項的功能,文章詳細介紹了實現(xiàn)步驟和示例代碼,對于想要了解如何使用Vue實現(xiàn)下拉框多選功能的讀者具有一定的參考價值

1、主表界面(數(shù)據(jù)來源于數(shù)據(jù)庫查表返回)：

<el-table :data="tableData" border>
    <el-table-column type="index" label="序號"></el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="愛好" prop="stringHobby"></el-table-column>
</el-table>

2、新增數(shù)據(jù)界面(點擊新增按鈕觸發(fā))：

如果要實現(xiàn)對“愛好”這一屬性進行下拉框多選，那么前端核心代碼可這么寫：

//html部分
<el-dialog title="新增" :visible.sync="addDialog">
    <el-form-item label="愛好：">
        <el-select v-model="formData.hobby" multiple>
             <el-option 
                v-for="item in hobbyList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
             ></el-option>
        </el-select>
    </el-form-item>
</el-dialog>
//js部分
export default {
    data() {
        return {
            addDialog: false,
            formData: [],
            hobbyList: [
                { value: "1", label: "籃球" },
                { value: "2", label: "排球" },
                { value: "3", label: "足球" }
            ]
        }
    }
}

如上圖所示，你選擇了籃球和排球，那么籃球和排球所對應的碼值“1”和“2”就會存入hobby這個屬性中，此時formData.hobby的類型是一個列表，其值為["1", "2"]，這個值是要作為參數(shù)傳到后臺作處理的。

3、編輯數(shù)據(jù)界面(點擊編輯按鈕觸發(fā))：

編輯界面要實現(xiàn)下拉框多選功能，和新增界面是類似的，但難點有兩點：1、當點擊上方的編輯按鈕時，如何將主表界面的數(shù)據(jù)全部且正確地帶過去？此時編輯界面的表格數(shù)據(jù)要和主表界面的數(shù)據(jù)完全一致并且“愛好”這一列自動選擇好，用戶可直接在現(xiàn)有的數(shù)據(jù)上作編輯而不是進去后"愛好"這一列都是空的；2、編輯好后整個表格數(shù)據(jù)的保存問題會比新增要復雜，這些字段在前端如何處理才能被后臺接收且方便保存？

針對難點一，我們會想到將主表中:data="tableData"的tableData賦值給這個編輯表格的:data，但是這樣只能將“姓名”帶過去，因為這個屬性在兩個界面都是字符串類型直接映射就好，“愛好”屬性則不同，它在主表是字符串，到了編輯表必須轉換為字符列表才行。如張三的愛好是足球和籃球，在主表中屬性值為"3, 1"(字符串類型)，需要轉為["3", "1"](字符列表類型)，這樣系統(tǒng)才能根據(jù)你設置的hobbyList中的value-label進行自動匹配，核心代碼如下：

//html部分
<el-dialog title="編輯" :visible.sync="editDialog">
    <el-table :data="editData" border>
        <el-table-column type="index" label="序號"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="愛好" prop="hobby">
            <template slot-scope="{ row }">
                <el-select v-model="row.hobby" multiple>
                    <el-option
                        v-for="item in hobbyList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
    </el-table>
</el-dialog>
//js部分
export default {
    data() {
        return {
            editDialog: false,
            editData: [],
        }
    }
    methods: {
        //獲取編輯頁面的表格數(shù)據(jù)
        edit() {
            this.editDialog = true;
            //將主表數(shù)據(jù)賦到編輯頁面的表格數(shù)據(jù)中
            this.editData = this.tableData;
            //循環(huán)獲取表格的每條記錄
            for (let i = 0; i < this.editData.length; i++) {
            //以下代碼的目的是將每條記錄的愛好這一屬性的類型由字符串轉換為列表對象，如替換前為"1,2,3"，那么替換后為["1","2","3"]
                let str = this.editData[i].hobby.split(",");
                let newArray = [];
                //循環(huán)獲取每條記錄的愛好集合
                for (let j = 0; j < str.length; j++) {
                    newArray.push(str[j]);
                }
                this.editData[i].hobby = newArray;
            }
        }
    }
}

針對難點二，實現(xiàn)方法就是對表格的每條記錄都要處理一下(主要是處理"愛好"這一列)，然后做循環(huán)逐條存庫，此處沒必要長篇大論，直接上代碼：

//html部分
<el-button @click="editSave" icon="el-icon-edit">
    保存
</el-button>
//js部分
export default {
    methods: {
        //編輯記錄時的保存方法
        editSave() {
            var rows=[]
            var saveData=[]
            for(let i=0; i< this.editData.length; i++){
                var object = new Object()
                //獲取當前記錄的所有屬性
                rows[i] = this.editData[i]
                object.name = rows[i].name
                object.hobby = rows[i].hobby
                saveData.push(object)
            }
            //將數(shù)據(jù)組合成一個列表對象(savaData)傳給后端
            axios({
                method: "post",
                url: "/dealData/editData",
                params: savaData
            })
            .then(function(response) {
                this.$msgbox({
                    title: '系統(tǒng)提示',
                    message: response.data.message,
                    type: 'success',
                })
            })
            .catch(function(error) {
                console.log(error)
            })
        }
    }
}

以下是完整的前后端代碼，可拿來直接運行：

前端：

<template>
    <div>
        <div class="class1">
            <el-button
                @click="addDialog = true"
                type="primary"
                size="small"
                round
                icon="el-icon-edit"
            > 新增
            </el-button>
            <el-button
                @click="edit"
                type="primary"
                size="small"
                round
                icon="el-icon-edit"
            > 編輯
            </el-button>
        </div>
        <div>
            <el-table
                class="class2"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                :data="tableData"
                :show-header="true"
                :background="true"
                border
                width="800px"
                tooltip-effect="light"
            >
                <el-table-column type="index" label="序號" width="100px">
                </el-table-column>
                <el-table-column label="姓名" prop="name" width="200px">
                </el-table-column>
                <el-table-column label="愛好" prop="stringHobby" width="500px">
                </el-table-column>
            </el-table>
            <el-dialog
                title="新增"
                :visible.sync="addDialog"
                :show-close="true"
                append-to-body
                width="30%"
                center
            >
                <div class="class3">
                    <el-form style="margin-left: 50px">
                        <el-form-item label="姓名：">
                            <el-input
                                v-model="formData.name"
                                style="width:400px; margin-left:-70px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="愛好：">
                            <el-select
                                v-model="formData.hobby"
                                multiple
                                style="width:400px;margin-left:-70px"
                            >
                                <el-option
                                      v-for="item in hobbyList"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="class3">
                    <el-button
                        @click="addSave"
                        type="primary"
                        size="small"
                        round
                        icon="el-icon-edit"
                    >
                    保存
                    </el-button>
                </div>
            </el-dialog>
            <el-dialog
                title="編輯"
                :visible.sync="editDialog"
                :show-close="true"
                append-to-body
                center
            >
                <el-table
                    :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }"
                    :data="editData"
                    :show-header="true"
                    :background="true"
                    stripe
                    border
                    tooltip-effect="light"
                >
                    <el-table-column type="index" label="序號"></el-table-column>
                    <el-table-column label="姓名" prop="name"></el-table-column>
                    <el-table-column label="愛好" prop="hobby">
                        <template slot-scope="{ row }">
                            <el-select v-model="row.hobby" multiple style="width:300px">
                                <el-option
                                    width="300px"
                                    v-for="item in hobbyList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="class3">
                    <el-button
                        @click="editSave"
                        type="primary"
                        size="small"
                        round
                        icon="el-icon-edit"
                    >
                    保存
                    </el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            addDialog: false,
            editDialog: false,
            tableData: [],
            formData: [],
            editData: [],
            hobbyList: [
                { value: "1", label: "籃球" },
                { value: "2", label: "排球" },
                { value: "3", label: "足球" }
            ]
        };
    },
    mounted() {
        //進入主頁面自動獲取一次表格數(shù)據(jù)
        this.getData();
    },
    methods: {
        //獲取主頁表格數(shù)據(jù)
        getData() {
            axios({
                method: "post",
                url: "/dealData/showData",
                params: {}
            })
            .then(function(response) {
                this.tableData = response.data;
            })
            .catch(function(error) {
                console.log(error);
            });
        },
        //獲取編輯頁面的表格數(shù)據(jù)
        edit() {
            this.editDialog = true;
            //將主表數(shù)據(jù)賦到編輯頁面的表格數(shù)據(jù)中
            this.editData = this.tableData;
            //循環(huán)獲取表格的每條記錄
            for (let i = 0; i < this.editData.length; i++) {
                //以下代碼的目的是將每條記錄的愛好這一屬性的類型由字符串轉換為列表對象，如替換前為"1,2,3"，那么替換后為["1","2","3"]
                let str = this.editData[i].hobby.split("，");
                let newArray = [];
                //循環(huán)獲取每條記錄的愛好集合
                for (let j = 0; j < str.length; j++) {
                    newArray.push(str[j]);
                }
                this.editData[i].hobby = newArray;
            }
        },
        //新增記錄時的保存方法
        addSave() {
            axios({
                method: "post",
                url: "/dealData/addData",
                params: { 'name': this.formData.name, 'hobby': this.formData.hobby }
            })
            .then(function(response) {
                console.log(response.data.message);
            })
            .catch(function(error) {
                console.log(error);
            });
        },
        //編輯記錄時的保存方法
        editSave() {
            var rows = [];
            var saveData = [];
            for (let i = 0; i < this.editData.length; i++) {
                var object = new Object();
                //獲取當前記錄的所有屬性
                rows[i] = this.editData[i];
                object.name = rows[i].name;
                object.hobby = rows[i].hobby;
                saveData.push(object);
            }
            //將數(shù)據(jù)組合成一個列表對象(savaData)傳給后端
            axios({
                method: "post",
                url: "/dealData/editData",
                params: savaData
            })
            .then(function(response) {
                this.$msgbox({
                    title: "系統(tǒng)提示",
                    message: response.data.message,
                    type: "success"
                });
            })
            .catch(function(error) {
                console.log(error);
            });
        }
    }
}
</script>
<style scoped>
.class1 {
    margin-top: 50px;
    margin-bottom: 50px;
}
.class2 {
    width: 800px;
    margin: auto;
}
.class3 {
    margin-top: 50px;
    text-align: center;
}
</style>

后端：

@Component
@Path("/dealData")
@Consumes({MediaType.APPLICATION_JSON})
@Produces({MediaType.APPLICATION_JSON})
public class DealDataController{
    @Path("/showData")
    @Post
    public List<personBO> showData (){
        //查庫將數(shù)據(jù)導入表格，personBO類需要自己寫，至少包含id、name、hobby、stringHobby這四個屬性，其中stringHobby屬性只做前端展示用
        List<personBO> personList = DealDataService.getPageData();
        for(personBO person: personList){
            String hobby = person.getHobby();
            //按照愛好編碼依次替換，如替換前為"2,1,3"，替換后則為"排球,籃球,足球"
            String stringHobby = hobby.replace("1","籃球").replace("2","排球").replace("3","足球");
            person.setStringHobby(stringHobby)
        }
        return personList;
    }
    @Path("/addData")
    @Post
    public Map<String,String> addData (Map<String, Object> paramMap){
        Map<String,String> result = new HashMap<>();
        //paramMap對象的hobby屬性是列表類型，現(xiàn)將其利用逗號分隔符組合成一個字符串并賦值給stringHobby，然后存入數(shù)據(jù)庫，例如數(shù)據(jù)庫表中hobby列看到的數(shù)據(jù)為："1, 2, 3"，表示三種球都是該人的愛好
        List<String> hobbyList = (List<String>) paramMap.get("hobby");
        paramMap.put("stringHobby", StringUtils.join(hobbyList,','));
        //在Dao層將數(shù)據(jù)插入數(shù)據(jù)庫，插入成功返回true，失敗返回false，此方法不展開寫，注意在Mybatis中寫sql語句時不是存paramMap的hobby的值，而是存paramMap的stringHobby的值
        boolean str = DealDataDao.insertData(paramMap);
        if(str){
            result.put("statusCode", "1111");
            result.put("message", "數(shù)據(jù)插入成功");
        }else{
            result.put("statusCode", "0000");
            result.put("message", "數(shù)據(jù)插入失敗");
        }
        return result;
    }
    @Path("/editData")
    @Post
    public Map<String,String> editData (Map<String, List<Map<String,Object>>> paramMap){
        Map<String,String> result = new HashMap<>();
        //將獲取到的表格數(shù)據(jù)作為對象列表，一個對象對應表格的一條記錄
        List<Map<String, Object>> dataList = paramMap.get("saveData");
        int seccessNum = 0;
        //對表格中的每條記錄進行循環(huán)更新
        for (Map<String,Object> map: dataList){
        //map對象的hobby屬性是列表類型，現(xiàn)將其利用逗號分隔符組合成一個字符串并賦值給stringHobby，然后存入數(shù)據(jù)庫，例如數(shù)據(jù)庫表中hobby列看到的數(shù)據(jù)為："1, 2, 3"，表示三種球都是該人的愛好
            List<String> hobbyList = (List<String>) map.get("hobby");
            map.put("stringHobby", StringUtils.join(hobbyList,','));
            //在Dao層將數(shù)據(jù)更新至數(shù)據(jù)庫，更新成功返回true，失敗返回false，此方法亦不展開寫，注意在Mybatis中寫sql語句時不是存map的hobby的值，而是存map的stringHobby的值
            boolean str = DealDataDao.updateData(map);
            if(str) {
                seccessNum++;         
            }
        }
        //判斷更新成功數(shù)是否等于總記錄數(shù)
        if(seccessNum == dataList.size()){
            result.put("statusCode", "1111");
            result.put("message", "全部數(shù)據(jù)均更新成功");
        }else{
            result.put("statusCode", "0000");
            result.put("message", "存在更新失敗的記錄");
        }
        return result;
    }

數(shù)據(jù)庫表中保存的記錄如下(1代表籃球，2代表排球，3代表足球，屬性hobby為String類型)：