vue實(shí)現(xiàn)下拉框的多選功能(附后端處理參數(shù))
更新時(shí)間：2023年08月08日 10:19:51 作者：【金融科技螞蟻】
本文介紹了如何使用Vue實(shí)現(xiàn)下拉框的多選功能,實(shí)現(xiàn)了在選擇框中選擇多個(gè)選項(xiàng)的功能,文章詳細(xì)介紹了實(shí)現(xiàn)步驟和示例代碼,對(duì)于想要了解如何使用Vue實(shí)現(xiàn)下拉框多選功能的讀者具有一定的參考價(jià)值
本次演示共涉及三個(gè)界面，一個(gè)是主表用于展示數(shù)據(jù)的，一個(gè)是表單用于新增數(shù)據(jù)的，另一個(gè)則是編輯用于修改表格數(shù)據(jù)的，先上效果圖：
1、主表界面(數(shù)據(jù)來(lái)源于數(shù)據(jù)庫(kù)查表返回)：
<el-table :data="tableData" border>
<el-table-column type="index" label="序號(hào)"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="愛(ài)好" prop="stringHobby"></el-table-column>
</el-table>2、新增數(shù)據(jù)界面(點(diǎn)擊新增按鈕觸發(fā))：
如果要實(shí)現(xiàn)對(duì)“愛(ài)好”這一屬性進(jìn)行下拉框多選，那么前端核心代碼可這么寫(xiě)：
//html部分
<el-dialog title="新增" :visible.sync="addDialog">
<el-form-item label="愛(ài)好：">
<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: "足球" }
]
}
}
}如上圖所示，你選擇了籃球和排球，那么籃球和排球所對(duì)應(yīng)的碼值“1”和“2”就會(huì)存入hobby這個(gè)屬性中，此時(shí)formData.hobby的類(lèi)型是一個(gè)列表，其值為["1", "2"]，這個(gè)值是要作為參數(shù)傳到后臺(tái)作處理的。
3、編輯數(shù)據(jù)界面(點(diǎn)擊編輯按鈕觸發(fā))：
編輯界面要實(shí)現(xiàn)下拉框多選功能，和新增界面是類(lèi)似的，但難點(diǎn)有兩點(diǎn)：1、當(dāng)點(diǎn)擊上方的編輯按鈕時(shí)，如何將主表界面的數(shù)據(jù)全部且正確地帶過(guò)去？此時(shí)編輯界面的表格數(shù)據(jù)要和主表界面的數(shù)據(jù)完全一致并且“愛(ài)好”這一列自動(dòng)選擇好，用戶(hù)可直接在現(xiàn)有的數(shù)據(jù)上作編輯而不是進(jìn)去后"愛(ài)好"這一列都是空的；2、編輯好后整個(gè)表格數(shù)據(jù)的保存問(wèn)題會(huì)比新增要復(fù)雜，這些字段在前端如何處理才能被后臺(tái)接收且方便保存？
針對(duì)難點(diǎn)一，我們會(huì)想到將主表中:data="tableData"的tableData賦值給這個(gè)編輯表格的:data，但是這樣只能將“姓名”帶過(guò)去，因?yàn)檫@個(gè)屬性在兩個(gè)界面都是字符串類(lèi)型直接映射就好，“愛(ài)好”屬性則不同，它在主表是字符串，到了編輯表必須轉(zhuǎn)換為字符列表才行。如張三的愛(ài)好是足球和籃球，在主表中屬性值為"3, 1"(字符串類(lèi)型)，需要轉(zhuǎn)為["3", "1"](字符列表類(lèi)型)，這樣系統(tǒng)才能根據(jù)你設(shè)置的hobbyList中的value-label進(jìn)行自動(dòng)匹配，核心代碼如下：
//html部分
<el-dialog title="編輯" :visible.sync="editDialog">
<el-table :data="editData" border>
<el-table-column type="index" label="序號(hào)"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="愛(ài)好" 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: {
//獲取編輯頁(yè)面的表格數(shù)據(jù)
edit() {
this.editDialog = true;
//將主表數(shù)據(jù)賦到編輯頁(yè)面的表格數(shù)據(jù)中
this.editData = this.tableData;
//循環(huán)獲取表格的每條記錄
for (let i = 0; i < this.editData.length; i++) {
//以下代碼的目的是將每條記錄的愛(ài)好這一屬性的類(lèi)型由字符串轉(zhuǎn)換為列表對(duì)象，如替換前為"1,2,3"，那么替換后為["1","2","3"]
let str = this.editData[i].hobby.split(",");
let newArray = [];
//循環(huán)獲取每條記錄的愛(ài)好集合
for (let j = 0; j < str.length; j++) {
newArray.push(str[j]);
}
this.editData[i].hobby = newArray;
}
}
}
}針對(duì)難點(diǎn)二，實(shí)現(xiàn)方法就是對(duì)表格的每條記錄都要處理一下(主要是處理"愛(ài)好"這一列)，然后做循環(huán)逐條存庫(kù)，此處沒(méi)必要長(zhǎng)篇大論，直接上代碼：
//html部分
<el-button @click="editSave" icon="el-icon-edit">
保存
</el-button>
//js部分
export default {
methods: {
//編輯記錄時(shí)的保存方法
editSave() {
var rows=[]
var saveData=[]
for(let i=0; i< this.editData.length; i++){
var object = new Object()
//獲取當(dāng)前記錄的所有屬性
rows[i] = this.editData[i]
object.name = rows[i].name
object.hobby = rows[i].hobby
saveData.push(object)
}
//將數(shù)據(jù)組合成一個(gè)列表對(duì)象(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)
})
}
}
}以下是完整的前后端代碼，可拿來(lái)直接運(yùn)行：
前端：
<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="序號(hào)" width="100px">
</el-table-column>
<el-table-column label="姓名" prop="name" width="200px">
</el-table-column>
<el-table-column label="愛(ài)好" 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="愛(ài)好：">
<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="序號(hào)"></el-table-column>
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="愛(ài)好" 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() {
//進(jìn)入主頁(yè)面自動(dòng)獲取一次表格數(shù)據(jù)
this.getData();
},
methods: {
//獲取主頁(yè)表格數(shù)據(jù)
getData() {
axios({
method: "post",
url: "/dealData/showData",
params: {}
})
.then(function(response) {
this.tableData = response.data;
})
.catch(function(error) {
console.log(error);
});
},
//獲取編輯頁(yè)面的表格數(shù)據(jù)
edit() {
this.editDialog = true;
//將主表數(shù)據(jù)賦到編輯頁(yè)面的表格數(shù)據(jù)中
this.editData = this.tableData;
//循環(huán)獲取表格的每條記錄
for (let i = 0; i < this.editData.length; i++) {
//以下代碼的目的是將每條記錄的愛(ài)好這一屬性的類(lèi)型由字符串轉(zhuǎn)換為列表對(duì)象，如替換前為"1,2,3"，那么替換后為["1","2","3"]
let str = this.editData[i].hobby.split("，");
let newArray = [];
//循環(huán)獲取每條記錄的愛(ài)好集合
for (let j = 0; j < str.length; j++) {
newArray.push(str[j]);
}
this.editData[i].hobby = newArray;
}
},
//新增記錄時(shí)的保存方法
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);
});
},
//編輯記錄時(shí)的保存方法
editSave() {
var rows = [];
var saveData = [];
for (let i = 0; i < this.editData.length; i++) {
var object = new Object();
//獲取當(dāng)前記錄的所有屬性
rows[i] = this.editData[i];
object.name = rows[i].name;
object.hobby = rows[i].hobby;
saveData.push(object);
}
//將數(shù)據(jù)組合成一個(gè)列表對(duì)象(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 (){
//查庫(kù)將數(shù)據(jù)導(dǎo)入表格，personBO類(lèi)需要自己寫(xiě)，至少包含id、name、hobby、stringHobby這四個(gè)屬性，其中stringHobby屬性只做前端展示用
List<personBO> personList = DealDataService.getPageData();
for(personBO person: personList){
String hobby = person.getHobby();
//按照愛(ài)好編碼依次替換，如替換前為"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對(duì)象的hobby屬性是列表類(lèi)型，現(xiàn)將其利用逗號(hào)分隔符組合成一個(gè)字符串并賦值給stringHobby，然后存入數(shù)據(jù)庫(kù)，例如數(shù)據(jù)庫(kù)表中hobby列看到的數(shù)據(jù)為："1, 2, 3"，表示三種球都是該人的愛(ài)好
List<String> hobbyList = (List<String>) paramMap.get("hobby");
paramMap.put("stringHobby", StringUtils.join(hobbyList,','));
//在Dao層將數(shù)據(jù)插入數(shù)據(jù)庫(kù)，插入成功返回true，失敗返回false，此方法不展開(kāi)寫(xiě)，注意在Mybatis中寫(xiě)sql語(yǔ)句時(shí)不是存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ù)作為對(duì)象列表，一個(gè)對(duì)象對(duì)應(yīng)表格的一條記錄
List<Map<String, Object>> dataList = paramMap.get("saveData");
int seccessNum = 0;
//對(duì)表格中的每條記錄進(jìn)行循環(huán)更新
for (Map<String,Object> map: dataList){
//map對(duì)象的hobby屬性是列表類(lèi)型，現(xiàn)將其利用逗號(hào)分隔符組合成一個(gè)字符串并賦值給stringHobby，然后存入數(shù)據(jù)庫(kù)，例如數(shù)據(jù)庫(kù)表中hobby列看到的數(shù)據(jù)為："1, 2, 3"，表示三種球都是該人的愛(ài)好
List<String> hobbyList = (List<String>) map.get("hobby");
map.put("stringHobby", StringUtils.join(hobbyList,','));
//在Dao層將數(shù)據(jù)更新至數(shù)據(jù)庫(kù)，更新成功返回true，失敗返回false，此方法亦不展開(kāi)寫(xiě)，注意在Mybatis中寫(xiě)sql語(yǔ)句時(shí)不是存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ù)庫(kù)表中保存的記錄如下(1代表籃球，2代表排球，3代表足球，屬性hobby為String類(lèi)型)：
| id | name | hobby |
| 1 | 張三 | 3, 1 |
| 2 | 李四 | 2 |
| 3 | 王五 | 1, 3, 2 |
到此這篇關(guān)于vue實(shí)現(xiàn)下拉框的多選功能(附后端處理參數(shù))的文章就介紹到這了,更多相關(guān)vue 下拉框多選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中實(shí)現(xiàn)上傳文件給后臺(tái)實(shí)例詳解
在本文里小編給大家分享了一篇關(guān)于vue中實(shí)現(xiàn)上傳文件給后臺(tái)的實(shí)例內(nèi)容，有需要此功能的可以學(xué)習(xí)參考下。2019-08-08
vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理
這篇文章主要介紹了vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue如何將時(shí)間戳轉(zhuǎn)換日期格式,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點(diǎn)
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式
這篇文章主要介紹了vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-04-04
vue實(shí)現(xiàn)導(dǎo)出word文檔的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出word文檔（包括圖片）,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue雙擊事件2.0事件監(jiān)聽(tīng)(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(tīng)(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue監(jiān)聽(tīng)scroll的坑的解決方法
這篇文章主要介紹了vue監(jiān)聽(tīng)scroll的坑的解決方法，現(xiàn)在分享給大家，也給大家做個(gè)參考，希望給有同樣經(jīng)歷的人幫助2017-09-09
vue中實(shí)時(shí)監(jiān)聽(tīng)div元素盒子的寬高方法
這篇文章主要給大家介紹了關(guān)于vue中如何實(shí)時(shí)監(jiān)聽(tīng)div元素盒子的寬高的相關(guān)資料,在Vue中你可以使用Vue的計(jì)算屬性和偵聽(tīng)器來(lái)動(dòng)態(tài)監(jiān)測(cè)元素的高度,文中給出了簡(jiǎn)單代碼示例,需要的朋友可以參考下2023-09-09
Vue如何實(shí)現(xiàn)將后端返回二進(jìn)制文件在瀏覽器自動(dòng)下載
Vue項(xiàng)目開(kāi)發(fā)中,遇到界面下載功能時(shí),前端如何實(shí)現(xiàn)將后端返回二進(jìn)制文件在瀏覽器自動(dòng)下載呢,本文就來(lái)和大家聊聊具體的解決方法吧2024-11-11