vantfieldlabel样式修改_vant三级联动自定义数据格式-CSDN博客

本文介绍了如何自定义Vant组件Field Label的样式，包括修改背景色、字体大小等，并展示了如何实现三级联动效果。通过示例代码展示了如何处理地区选择的数据，包括获取数据、设置默认值和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html>

Document

.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;

}

地区

@click="shArea = true" />

@change="onChange" />

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();

}