网上购物系统毕业论文_网页编辑模式快捷键_seo千享科技_深圳外贸网站推广

接口返回值格式：

二级级联-vue2

				<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index":range="array" range-key="label"><view class="uni-input">{{title}}</view></picker>

export default {data() {return {index: [0, 0],array: [[],[]],childArr: [], // 二级分类数据源title: '请选择'}}}

	//籍贯二级列表处理// 获取二级分类columnchange(e) {// 当滚动切换一级分类时，为当前的一级分类添加它的子类if (e.detail.column == 0) {// #ifdef H5// 在小程序中直接赋值无效  H5 可直接赋值this.array[1] = this.childArr[e.detail.value]// #endif// #ifdef MP-WEIXIN// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行this.$set(this.array, 1, this.childArr[e.detail.value])// #endif}},// 选择籍贯bindPickerChange(e) {console.log('picker发送选择改变，携带值为', e)let selectValue = e.detail.value;if (this.array[0].length != 0) {this.title = this.array[0][selectValue[0]].label// 只传市一级的idthis.personData.native_place = this.array[0][selectValue[0]].value};if (this.array[1].length != 0) {this.title += ',' + this.array[1][selectValue[1]].labelthis.personData.native_place = this.array[1][selectValue[1]].value}},// 获取籍贯async getNativePlace() {//获取接口数据const {data} = await GetNativePlace()// 一级分类的数据源this.array[0] = data// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源this.childArr = data.map((item) => item.children)// 第一次打开时，默认给一级分类添加它的二级分类this.array[1] = this.childArr[0]},

三级级联-vue3

					<picker mode="multiSelector" :value="pageData.multiIndex" :range="pageData.newAddressList" range-key="label"@change="pickerChange" @columnchange="pickerColumnchange"><view class="uni-input">{{pageData.addressName}}</view></picker>

	const pageData = reactive({oldAddressList: [],newAddressList: [[0],[0],[0]],multiIndex: [0, 0, 0],addressName: '请选择',})

	//获取省市区const getProvinceEtc = async () => {//获取接口数据const res = await uni.$http.post('/api/common/getCity')pageData.oldAddressList = res.data.data;initAddress();}getProvinceEtc()function initAddress() {pageData.newAddressList[0] = pageData.oldAddressList.map((item, index) => {// console.log('item:',item);var obj = {label: item.label,value: item.value}return obj})pageData.newAddressList[1] = pageData.oldAddressList[pageData.multiIndex[0]].children.map((item, index) => {// console.log('item:',item);var obj = {label: item.label,value: item.value}return obj})pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]].children.map((item, index) => {// console.log('item:',item);var obj = {label: item.label,value: item.value}return obj})// console.log('this.newAddressList:', pageData.newAddressList);}//变更选择function pickerChange(e) {// console.log('pickerChange:', e.detail);// console.log(pageData.newAddressList[2][e.detail.value[2]]);// console.log(pageData.newAddressList[2][e.detail.value[2]].value);pageData.addData.area_id = pageData.newAddressList[2][e.detail.value[2]].value;pageData.addressName = pageData.newAddressList[0][pageData.multiIndex[0]].label + '-' + pageData.newAddressList[1][pageData.multiIndex[1]].label + '-' + pageData.newAddressList[2][pageData.multiIndex[2]].label}function pickerColumnchange(e) {// console.log('pickerColumnchange:', e);// 第几列滑动// console.log(e.detail.column);// 第几列滑动的下标// console.log(e.detail.value)// 第一列滑动if (e.detail.column === 0) {pageData.multiIndex[0] = e.detail.value;pageData.newAddressList[1] = pageData.oldAddressList[pageData.multiIndex[0]].children.map((item, index) => {// console.log('item:',item);var obj = {label: item.label,value: item.value}return obj})pageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]].children.map((item, index) => {// console.log('item:',item);var obj = {label: item.label,value: item.value}return obj})pageData.multiIndex.splice(1, 1, 0)pageData.multiIndex.splice(2, 1, 0)}if (e.detail.column === 1) {pageData.multiIndex[1] = e.detail.valuepageData.newAddressList[2] = pageData.oldAddressList[pageData.multiIndex[0]].children[pageData.multiIndex[1]].children.map((item, index) => {// console.log('item:',item);var obj = {label: item.label,value: item.value}return obj})// 第二列 滑动 第三列 变成第一个pageData.multiIndex.splice(2, 1, 0)}if (e.detail.column === 2) {pageData.multiIndex[2] = e.detail.value}}