Vue+element-ui的el-cascader实现动态添加/删除级联地点输入框
1. 需求
- 实现省市区三级地点级联选择，可联想；
- 包括始发地点、途径地点、终止地点，始发地点、终止地点均为一个，途径地点可以没有也可以是多个；
- 用户可以动态添加/删除途径地点。
2. 场景说明
-
使用级联选择器Cascader需要的树形数据，前端请求到后端获取省市区数据并处理为elementui官网示例的树形数据格式，如下所示，为节省篇幅树形数据示例只展示部分；文章来源地址https://www.toymoban.com/news/detail-443170.html
[ { children: [ { children: [ { label: "东城区" value: "110101" }, { label: "西城区" value: "110102" }, ... ] label: "北京市" value: "110100" }, ... ] label: "北京市" value: "110000" }, ... ]
3. 实现代码
3.1 表单结构
<el-form :model="form" ref="form" label-width="110px">
<el-form-item label="起始地点:" prop="startPoint">
<el-cascader
placeholder="请选择地点"
: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()"
>添加途经地点</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="'途径地点' + (index+1) +':'" :prop="'' +index">
<el-cascader
placeholder="请选择地点"
: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="终止地点:" prop="endPoint">
<el-cascader
placeholder="请选择地点"
: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结构
<script>
data() {
return {
form: {
startPoint:"", //起始地点
wayPointsArr:[], //途径地点，有多个，因此用数组
endPoint:"", //终止地点
},
districtList:[],//省市区数据，请求后端获取并组装成elementui Cascader需要的树形数据
districtFullNameList:{}, //用来存储选择地点的名称
districtLnglatList:{} //用来存储选择地点的经纬度
};
},
methods: {
//处理地点级联选择事件
async handleChange(value,key) {
//这里根据vlaue调用后端接口获取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;
});
}
},
// 动态添加一个机动任务途径地点
addWayPoint() {
this.form.wayPointsArr.push({WAYPOINT:"", key:Date.now()})
},
// 删除一个机动任务途径地点
removeWayPoint(index) {
this.form.wayPointsArr.splice(index, 1);
},
//提交
submit(){
let routesArray = [];
routesArray.push(this.districtFullNameList['startPoint']);
Object.keys(this.districtFullNameList).forEach(key => { //遍历键值对对象
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 需要注意的点
- 使用elementui的级联选择器Cascader来实现地点级联输入框，通过属性filterable设置是否可搜索；
- 因为我需要提交表单时给后端传入用"-"分割的路线字符串，为了方便，在动态添加途径地点输入框时push了时间戳作为key,这样输入地点和修改地点时不会乱，并且Object中默认以key顺序排序的，所以提交时只需要遍历存储地点数据的Object即可；
- Cascader选择触发后，获得的是地点树状数据districtList中的value数组，但我们需要的是label，这里可以尝试使用方法
getCheckedNodes()[0].pathLabels获取，但我这里还是调用后端接口根据value值查询的。 - 如果需要回显，根据value数组回显地点。
文章来源：https://www.toymoban.com/news/detail-443170.html
到了这里，关于Vue+element-ui的el-cascader实现动态添加删除级联地点输入框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
