[uview]移动端通用多级联动下拉组件封装

浮云而已丶

已于 2024-03-25 20:49:52 修改

阅读量640

点赞数 2

文章标签：前端 javascript uniapp

于 2024-03-25 20:48:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45625778/article/details/137024861

版权

适用环境 — vue2

uview-plus

数据格式要求:树形结构数据通过children属性进行嵌套，我此次的多级联动是区县->街道->区域的三级联动

话不多说，直接上代码

//* keyName代表取你的数据中展示的名字的值 具体的字段根据你们接口返回的属性决定
    <u-picker :show="selectShow" :columns="columns" keyName="title" @confirm="getSlect" @cancel="selectShow = false" closeOnClickOverlay @close="selectShow = false" @change="changeHandler"></u-picker>
    
     //* data中定义的字段
     data() {
    return {
    //* 展示联动面板
      selectShow: false,
      //* 切换是展示默认还是选中
      userSelect: false,
      //* 选中回填的信息
      selectMsg: '',
      //* 联动展示的列表 数据格式为二维数组
      columns: [],
      //* 接口获取到的树形数据
      origiData: [] 
    }
  },

//* 初始化数据 
 initData() {
      let district = []
      let street = []
      let village = []
      this.origiData.forEach(item => {
        district.push(item)
        if (district[0].hasChildren) {
          street.push(item.children[0])
          if (street[0].hasChildren) {
            village.push(street[0].children[0])
          }
        }
      })
      this.columns.push(district, street, village)
    }
  //* 通过接口获取初始数据 将此处替换成你们自己的接口 
   getRegionTreeSelect() {
      getRegionTree({
        data: { xxxx: xxxx },
        success: res => {
          if (res.code == 200) {
            this.origiData = res.data
          }
        }
      })
    },
    //* 当面板切换数据时的操作
      changeHandler(e) {
      const { columnIndex, value, values, index, picker } = e
      if (columnIndex === 0) {
         //* 当操作第一列数据时 注意需要同步设置对应二、三列数据
        if (this.origiData[index].hasChildren) {
          picker.setColumnValues(1, this.origiData[index].children)
          if (this.origiData[index].children[0].hasChildren) {
            picker.setColumnValues(2, this.origiData[index].children[0].children)
          } else {
            picker.setColumnValues(2, [])
          }
        } else {
          picker.setColumnValues(1, [])
          picker.setColumnValues(2, [])
        }
      } else if (columnIndex === 1) {
            //* 第二列数据也是同样的操作
        if (values[1][index].hasChildren) {
          picker.setColumnValues(2, values[1][index].children)
        } else {
          picker.setColumnValues(2, [])
        }
      }
    },
    //* 传递参数到使用的组件
     getSlect(e) {
     //* 根据数据格式的不同 e的值也不一样的 我此处只给一个示例 需要得到什么值你们自己改
  	//* 获取选中的消息
       this.selectMsg = e.value
       this.userSelect = true
       //* 通过selectContent方法传递给组件
       this.$emit('selectContent',e)
	  }