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: "足球" }
            ]
        }
    }
}

如上圖所示，你選擇了籃球和排球，那么籃球和排球所對應(yīng)的碼值“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ù)的保存問題會比新增要復(fù)雜，這些字段在前端如何處理才能被后臺接收且方便保存？

針對難點一，我們會想到將主表中:data="tableData"的tableData賦值給這個編輯表格的:data，但是這樣只能將“姓名”帶過去，因為這個屬性在兩個界面都是字符串類型直接映射就好，“愛好”屬性則不同，它在主表是字符串，到了編輯表必須轉(zhuǎn)換為字符列表才行。如張三的愛好是足球和籃球，在主表中屬性值為"3, 1"(字符串類型)，需要轉(zhuǎn)為["3", "1"](字符列表類型)，這樣系統(tǒng)才能根據(jù)你設(shè)置的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++) {
            //以下代碼的目的是將每條記錄的愛好這一屬性的類型由字符串轉(zhuǎn)換為列表對象，如替換前為"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++) {
                //以下代碼的目的是將每條記錄的愛好這一屬性的類型由字符串轉(zhuǎn)換為列表對象，如替換前為"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ù)導(dǎo)入表格，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ù)作為對象列表，一個對象對應(yīng)表格的一條記錄
        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類型)：