Vue中使用el-select下拉框实现省、市、县地区三级联动功能 .
2、针对bms项目进行优化使用，实现了前后端联调查询（batt_device_detail）可以直接在前端实现，但是对于bms项目的传参不适用，需要更改。
·
1、原文链接：element-ui的select下拉组件实现的省市区联动_伟笑的博客-CSDN博客
可以直接在前端实现，但是对于bms项目的传参不适用，需要更改
<template>
<div>
<el-select v-model="pname" @change="choseProvince" placeholder="省级地区">
<el-option
v-for="(item,$index) in province"
:key="$index"
:label="item.value"
:value="item.id"
></el-option>
</el-select>
<el-select v-model="cname" @change="choseCity" placeholder="市级地区">
<el-option v-for="(item,$index) in city" :key="$index" :label="item.value" :value="item.id"></el-option>
</el-select>
<el-select v-model="bname" @change="choseBlock" placeholder="区级地区">
<el-option
v-for="(item,$index) in block"
:key="$index"
:label="item.value"
:value="item.value"
></el-option>
</el-select>
</div>
</template>
<script>
import ChineseDistricts from "../area";
export default {
data() {
return {
ChineseDistricts: ChineseDistricts,
province: [],
shi1: [],
qu1: [],
city: [],
block: [],
pname: "", //省的名字
cname: "", //市的名字
bname: "" //区的名字
};
},
methods: {
// 加载china地点数据，三级
getCityData() {
let that = this;
that.ChineseDistricts.forEach(function(item, index) {
//省级数据
that.province.push({
id: item.code,
value: item.name,
children: item.cityList
});
});
},
// 选省
choseProvince(e) {
let that = this;
that.city = [];
that.block = [];
that.cname = "";
that.bname = "";
for (var index2 in that.province) {
if (e === that.province[index2].id) {
that.shi1 = that.province[index2].children;
that.pname = that.province[index2].value;
that.shi1.forEach(function(citem, cindex) {
that.city.push({
id: citem.code,
value: citem.name,
children: citem.areaList
});
});
}
}
console.log(that.pname);
},
// 选市
choseCity(e) {
let that = this;
that.block = [];
for (var index3 in that.city) {
if (e === that.city[index3].id) {
that.qu1 = that.city[index3].children;
that.cname = that.city[index3].value;
that.E = that.qu1[0].id;
that.qu1.forEach(function(bitem, bindex) {
that.block.push({
id: bitem.code,
value: bitem.name,
children: []
});
});
}
}
console.log(that.cname);
},
// 选区
choseBlock(e) {
this.bname = e;
console.log(this.bname);
}
},
created() {
this.getCityData();
}
};
</script>
2、针对bms项目进行优化使用，实现了前后端联调查询（batt_device_detail）
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-batt__battdevicedetail}">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<!-- <el-form-item>
<el-input v-model="dataForm.id" placeholder="id" clearable></el-input>
</el-form-item> -->
　 　
<el-form-item label="供 应 商：">
<el-select v-model="dataForm.providerId" placeholder="供应商">
<!-- 这边用供应商的数据字典的数字对对应-->
<el-option label="比亚迪" value="0"></el-option>
<el-option label="比亚迪电池" value="1"></el-option>
</el-select>
</el-form-item>
　
<!-- 根据运营公司的id -->
<el-form-item label="运营公司：">
<el-select v-model="dataForm.companyId" placeholder="运营公司">
<!-- 这边用供应商的数据字典的数字对对应-->
<el-option label="伍壹换电" value="0"></el-option>
<el-option label="比亚迪(二部)" value="1"></el-option>
<el-option label="张飞换电" value="2"></el-option>
<el-option label="嘟嘟换电" value="3"></el-option>
</el-select>
</el-form-item>
　
<el-form-item label="设备状态:">
<el-select v-model="dataForm.status" placeholder="状态" clearable>
<!-- 这边用供应商的数据字典的数字对对应-->
<el-option label="暂未运营" value="0"></el-option>
<el-option label="已运营" value="1"></el-option>
</el-select>
</el-form-item>
　
<el-form-item label="SN码:">
<el-input
v-model="dataForm.sn"
placeholder="SN码"
clearable
></el-input>
</el-form-item>
<br />
<!--   -->
<el-form-item label="投放省/直辖市：">
<el-select
// 这里要注意，不然clearable，无法清楚绑定的值（注解要删除）
v-model="dataForm.pname"
@change="choseProvince"
placeholder="省级地区"
clearable
>
<el-option
v-for="(item, $index) in province"
:key="$index"
:label="item.value"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
　
<el-form-item label="投 放 市：">
<el-select v-model="dataForm.cname" @change="choseCity" placeholder="市级地区">
<el-option
v-for="(item, $index) in city"
:key="$index"
:label="item.value"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
　
<el-form-item label="投 放 区：">
<el-select
v-model="dataForm.bname"
@change="choseBlock"
placeholder="区级地区"
>
<el-option
v-for="(item, $index) in block"
:key="$index"
:label="item.value"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item>
<el-button type="info" @click="exportHandle()">{{
$t("export")
}}</el-button>
</el-form-item> -->
<el-form-item>
<el-button
v-if="$hasPermission('batt:battdevicedetail:save')"
type="primary"
@click="addOrUpdateHandle()"
>{{ $t("add") }}</el-button
>
</el-form-item>
<el-form-item>
<el-button
v-if="$hasPermission('batt:battdevicedetail:delete')"
type="danger"
@click="deleteHandle()"
>{{ $t("deleteBatch") }}</el-button
>
</el-form-item>
<br />
　 　
<!-- 模板 -->
<el-form-item>
<el-tag size="big" type="success" @click="exportMID()" color=""
>电池信息导入</el-tag
>
　
<el-tag size="big" type="danger" @click="exportHandle()" color=""
>导出</el-tag
>
　
<el-tag size="big" type="text" @click="test()" color=""
>模板下载</el-tag
>
　
</el-form-item>
<el-form-item>
<el-button
@click="getDataList()"
type="success"
icon="el-icon-search"
>{{ $t("query") }}</el-button
>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<!-- <el-table-column
prop="id"
label=""
header-align="center"
align="center"
></el-table-column> -->
<el-table-column
prop="sn"
label="SN"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="supplier"
label="供应商"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="status"
label="状态"
header-align="center"
align="center"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.status == 0" size="small" type="danger"
>暂未运营</el-tag
>
<el-tag
v-else-if="scope.row.status == 1"
size="small"
type="success"
>已运营</el-tag
>
<!-- 现在是只有三个状态，以下是 0 和 1 之外的状态，之后如果有需要添加，可以继续更改 -->
<el-tag v-else size="small">未出厂</el-tag>
</template>
</el-table-column>
<el-table-column
prop="company"
label="运营公司"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="province"
label="省/直辖市"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="city"
label="市级地区"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="block"
label="区级地区"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="creator"
label="创建人"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="createDate"
label="创建时间"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
v-if="$hasPermission('batt:battdevicedetail:update')"
type="text"
size="small"
@click="addOrUpdateHandle(scope.row.id)"
>{{ $t("update") }}</el-button
>
<el-button
v-if="$hasPermission('batt:battdevicedetail:delete')"
type="text"
size="small"
@click="deleteHandle(scope.row.id)"
>{{ $t("delete") }}</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
</div>
</el-card>
</template>
<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./battdevicedetail-add-or-update";
import ChineseDistricts from "../../../utils/area";
export default {
mixins: [mixinViewModule],
data() {
return {
// Vue中使用el-select下拉框实现省、市、县地区三级联动功能 .
ChineseDistricts: ChineseDistricts,
province: [],
shi1: [],
qu1: [],
city: [],
block: [],
// pname: "", //省的名字
// cname: "", //市的名字
// bname: "", //区的名字
mixinViewModuleOptions: {
getDataListURL: "/batt/battdevicedetail/page",
getDataListIsPage: true,
exportURL: "/batt/battdevicedetail/export",
deleteURL: "/batt/battdevicedetail",
deleteIsBatch: true,
},
dataForm: {
// id: "",
sn: "",
status: "",
pname: "", //省的名字
cname: "", //市的名字
bname: "", //区的名字
},
};
},
components: {
AddOrUpdate,
ChineseDistricts,
},
methods: {
// 加载china地点数据，三级
getCityData() {
let that = this;
that.ChineseDistricts.forEach(function (item, index) {
//省级数据
that.province.push({
id: item.code,
value: item.name,
children: item.cityList,
});
});
},
// 选省
choseProvince(e) {
let that = this;
that.city = [];
that.block = [];
that.dataForm.cname = "";
that.dataForm.bname = "";
for (var index2 in that.province) {
if (e === that.province[index2].id) {
that.shi1 = that.province[index2].children;
// 传值（要在这个地方就绑定好@！！）
that.dataForm.pname = that.province[index2].value;
that.shi1.forEach(function (citem, cindex) {
that.city.push({
id: citem.code,
value: citem.name,
children: citem.areaList,
});
});
}
}
console.log(that.pname);
},
// 选市
choseCity(e) {
let that = this;
that.block = [];
for (var index3 in that.city) {
if (e === that.city[index3].id) {
that.qu1 = that.city[index3].children;
that.dataForm.cname = that.city[index3].value;
that.E = that.qu1[0].id;
that.qu1.forEach(function (bitem, bindex) {
that.block.push({
id: bitem.code,
value: bitem.name,
children: [],
});
});
}
}
console.log(that.cname);
},
// 选区
choseBlock(e) {
this.dataForm.bname = e;
console.log(this.bname);
},
},
created() {
this.getCityData();
},
};
</script>
3、省市区数据 area.js可以导这里下载：https://gitee.com/qr110388/province.git
https://gitee.com/qr110388/province.git
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)