vant三级联动自定义数据格式
Posted 1609359841qq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vant三级联动自定义数据格式相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.home-perspmal-van-cell {
overflow: hidden;
background-color: #fff;
padding: 1.25rem 0.6875rem 1.25rem 0.6875rem;
.home-perspmal-van-cell__title {
float: left;
span {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(34, 34, 34, 1);
}
}
.home-perspmal-van-cell__value {
float: right;
.van-cell::after {
border-bottom: 0px;
}
.van-cell {
padding: 0;
}
input {
border: 0;
}
span {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(198, 198, 198, 1);
}
}
.home-perspmal-van-cell__values {
width: 100%;
padding-top: 1.34375rem;
display: flex;
div {
width: 100%;
div {
margin: 0;
flex: 1;
}
div:first-child {
justify-content: flex-start;
}
div:nth-child(2) {
justify-content: center;
}
div:last-child {
justify-content: flex-end;
}
}
}
.home-perspmal-van-cell__val {
display: flex;
}
}
/deep/.home-perspmal-van-cell__value span[data-v-3dce2c05] {
font-size: 0.81875rem;
font-family: PingFangSC-Regular, PingFang SC;
color: #323233;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="home-perspmal-van-cell">
<div class="home-perspmal-van-cell__title">
<span>地区</span>
</div>
<div class="home-perspmal-van-cell__value">
<van-field readonly clickable name="area" :value="merchant_province" placeholder="请选择省市县"
@click="shArea = true" />
<van-popup v-model="shArea" position="bottom">
<van-picker show-toolbar :columns="columns" @confirm="onConfirmc" @cancel="shArea = false"
@change="onChange" />
</van-popup>
</div>
</div>
<script>
export default {
data() {
return {
merchant_province: "", //选择地址
columns: [{
values: "",
text: "column1",
code: 1
},
{
values: "",
text: "column2",
code: 0
},
{
values: "",
text: "column3",
code: 0
}
],
}
},
methods: {
onChange(picker, values) {
picker.setColumnValues(1, this.cityData(this.datx, values[0].text));
picker.setColumnValues(2, this.counta(this.datx, values[1].text));
},
// 修改市
cityData(data, province) {
var that = this;
data.forEach(function (res) {
if (res.label == province) {
that.cityDates = res;
}
});
return that.cityDates.children.map(function (res) {
return {
text: res.label,
code: res.code
};
});
},
counta(data, county) {
var that = this;
var countyDate = "";
that.cityDates.children.forEach(function (res) {
if (res.label == county) {
countyDate = res;
}
});
// 这里如果没有找到对应的县
if (countyDate == "") {
countyDate = that.cityDates.children[0];
}
// return 县
return countyDate.children.map(function (res) {
return {
text: res.label,
code: res.code
};
});
// return 返回数据格式，因为我需要省市区code，所以我return的格式是对象,例:[{text:‘北京市‘,code:‘1‘},{text:‘河南省‘,code:‘2‘},...],如果你不需要code直接这样就可以 例[‘北京市‘,‘河南省‘,.....]
},
onConfirmc(val) {
this.merchant_province = `${val[0].text}/${val[1].text}/${val[2].text}`;
},
columnsaqw() {
// 默认展示一级的数据
let fupayAreaListst = localStorage.getItem("fupayAreaListst");
if (fupayAreaListst) {
this.data = JSON.parse(localStorage.getItem("fupayAreaListst"));
}
this.columns[0].values = Object.values(this.data).map(function (e) {
return {
text: e.label,
code: e.code
};
});
// 默认展示二级的数据
this.columns[1].values = Object.values(this.data[0].children).map(
function (e) {
return {
text: e.label,
code: e.code
};
}
);
// 默认展示三级的数据
this.columns[2].values = Object.values(
this.data[0].children[0].children
).map(function (e) {
return {
text: e.label,
code: e.code
};
});
},
},
created() {
let fupayAreaListst = localStorage.getItem("fupayAreaListst");
if (!fupayAreaListst) {
let res = await request(
"xxxxxxxx"
);
console.log(res.data);
if (res.data) {
this.data = res.data;
localStorage.setItem("fupayAreaListst", JSON.stringify(this.data));
this.columnsaqw();
}
}
}
}
</script>
</body>
</html>
以上是关于vant三级联动自定义数据格式的主要内容，如果未能解决你的问题，请参考以下文章