Vue+element-ui的el-cascader實(shí)現(xiàn)動(dòng)態(tài)添加/刪除級(jí)聯(lián)地點(diǎn)輸入框
1. 需求
- 實(shí)現(xiàn)省市區(qū)三級(jí)地點(diǎn)級(jí)聯(lián)選擇，可聯(lián)想；
- 包括始發(fā)地點(diǎn)、途徑地點(diǎn)、終止地點(diǎn)，始發(fā)地點(diǎn)、終止地點(diǎn)均為一個(gè)，途徑地點(diǎn)可以沒(méi)有也可以是多個(gè)；
- 用戶可以動(dòng)態(tài)添加/刪除途徑地點(diǎn)。
2. 場(chǎng)景說(shuō)明
-
使用級(jí)聯(lián)選擇器Cascader需要的樹(shù)形數(shù)據(jù)，前端請(qǐng)求到后端獲取省市區(qū)數(shù)據(jù)并處理為elementui官網(wǎng)示例的樹(shù)形數(shù)據(jù)格式，如下所示，為節(jié)省篇幅樹(shù)形數(shù)據(jù)示例只展示部分；文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-443170.html
[ { children: [ { children: [ { label: "東城區(qū)" value: "110101" }, { label: "西城區(qū)" value: "110102" }, ... ] label: "北京市" value: "110100" }, ... ] label: "北京市" value: "110000" }, ... ]
3. 實(shí)現(xiàn)代碼
3.1 表單結(jié)構(gòu)
<el-form :model="form" ref="form" label-width="110px">
<el-form-item label="起始地點(diǎn):" prop="startPoint">
<el-cascader
placeholder="請(qǐng)選擇地點(diǎn)"
:options="districtList"
filterable
clearable
v-model="form.startPoint"
@change="(ele) => {handleChange(ele,'startPoint')}"
ref="distCascader">
</el-cascader>
<el-button
style="margin-left:10px;"
type="primary"
size="small"
@click="addWayPoint()"
>添加途經(jīng)地點(diǎn)</el-button>
</el-form-item>
<template v-if="form.wayPointsArr.length > 0">
<el-row
v-for="(item, index) in form.wayPointsArr"
:key="item.key"
>
<el-form-item :label="'途徑地點(diǎn)' + (index+1) +':'" :prop="'' +index">
<el-cascader
placeholder="請(qǐng)選擇地點(diǎn)"
:options="districtList"
filterable
clearable
v-model="item.WAYPOINT"
@change="(ele) => {handleChange(ele,item.key)}"
ref="distCascader">
</el-cascader>
<el-button
style="margin-left:10px;"
type="danger"
size="small"
@click="removeWayPoint(index)"
>刪除</el-button>
</el-form-item>
</el-row>
</template>
<el-form-item label="終止地點(diǎn):" prop="endPoint">
<el-cascader
placeholder="請(qǐng)選擇地點(diǎn)"
:options="districtList"
filterable
clearable
v-model="form.endPoint"
@change="(ele) => {handleChange(ele,'endPoint')}"
ref="distCascader">
</el-cascader>
</el-form-item>
</el-form>
<el-row type="flex" justify="center" style="margin-top: 20px">
<el-button type="primary" @click="submit()">提交</el-button>
<el-button @click="clear()">清空</el-button>
</el-row>
3.2 script結(jié)構(gòu)
<script>
data() {
return {
form: {
startPoint:"", //起始地點(diǎn)
wayPointsArr:[], //途徑地點(diǎn)，有多個(gè)，因此用數(shù)組
endPoint:"", //終止地點(diǎn)
},
districtList:[],//省市區(qū)數(shù)據(jù)，請(qǐng)求后端獲取并組裝成elementui Cascader需要的樹(shù)形數(shù)據(jù)
districtFullNameList:{}, //用來(lái)存儲(chǔ)選擇地點(diǎn)的名稱
districtLnglatList:{} //用來(lái)存儲(chǔ)選擇地點(diǎn)的經(jīng)緯度
};
},
methods: {
//處理地點(diǎn)級(jí)聯(lián)選擇事件
async handleChange(value,key) {
//這里根據(jù)vlaue調(diào)用后端接口獲取label
if(value.length > 0) {
let params = {
tableName:"PROVINCE",
page:1,
where:"PROVINCE_ID,eq,'" + value[0] +"'",
};
await getTableData(params).then((res) => {
this.districtFullNameList[key] = res.data.data[0].PROVINCE_NAME;
});
params.tableName = "CITY";
params.where = "CITY_ID,eq,'" + value[1] +"'";
await getTableData(params).then((res) => {
this.districtFullNameList[key] += res.data.data[0].CITY_NAME;
});
params.tableName = "DISTRICT";
params.where = "DISTRICT_ID,eq,'" + value[2] +"'";
await getTableData(params).then((res) => {
this.districtFullNameList[key] += res.data.data[0].DISTRICT_NAME;
this.districtLnglatList[key] = res.data.data[0].LNG + "," + res.data.data[0].LAT;
});
}
},
// 動(dòng)態(tài)添加一個(gè)機(jī)動(dòng)任務(wù)途徑地點(diǎn)
addWayPoint() {
this.form.wayPointsArr.push({WAYPOINT:"", key:Date.now()})
},
// 刪除一個(gè)機(jī)動(dòng)任務(wù)途徑地點(diǎn)
removeWayPoint(index) {
this.form.wayPointsArr.splice(index, 1);
},
//提交
submit(){
let routesArray = [];
routesArray.push(this.districtFullNameList['startPoint']);
Object.keys(this.districtFullNameList).forEach(key => { //遍歷鍵值對(duì)對(duì)象
if(key !== 'startPoint' && key !== 'endPoint') {
routesArray.push(this.districtFullNameList[key]);
}
});
routesArray.push(this.districtFullNameList['endPoint']);
console.log(routesArray.join('-'));
},
//清空
clear() {
this.$refs['form'].resetFields();
this.form.wayPointsArr = []
}
}
</script>
3.3 需要注意的點(diǎn)
- 使用elementui的級(jí)聯(lián)選擇器Cascader來(lái)實(shí)現(xiàn)地點(diǎn)級(jí)聯(lián)輸入框，通過(guò)屬性filterable設(shè)置是否可搜索；
- 因?yàn)槲倚枰峤槐韱螘r(shí)給后端傳入用"-"分割的路線字符串，為了方便，在動(dòng)態(tài)添加途徑地點(diǎn)輸入框時(shí)push了時(shí)間戳作為key,這樣輸入地點(diǎn)和修改地點(diǎn)時(shí)不會(huì)亂，并且Object中默認(rèn)以key順序排序的，所以提交時(shí)只需要遍歷存儲(chǔ)地點(diǎn)數(shù)據(jù)的Object即可；
- Cascader選擇觸發(fā)后，獲得的是地點(diǎn)樹(shù)狀數(shù)據(jù)districtList中的value數(shù)組，但我們需要的是label，這里可以嘗試使用方法
getCheckedNodes()[0].pathLabels獲取，但我這里還是調(diào)用后端接口根據(jù)value值查詢的。 - 如果需要回顯，根據(jù)value數(shù)組回顯地點(diǎn)。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-443170.html
到了這里，關(guān)于Vue+element-ui的el-cascader實(shí)現(xiàn)動(dòng)態(tài)添加刪除級(jí)聯(lián)地點(diǎn)輸入框的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
