uniapp用picker实现自定义三级联动(children)

简介: uniapp用picker实现自定义三级联动(children)

数据大概得结构:

html:

<view class="invite">
        <u-cell title="点击选则" isLink :value="value" @click="shows=true"></u-cell>
        <u-picker :show="shows" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="shows=false"
          @change="changeHandler"></u-picker>
      </view>

js:

shows: false,
        columns: [],
        origiData: [],
        value: "",
async branchAppov() {
        const res = await branchAppov()
        this.origiData = res.data
        this.handelData();
      },
//初始化开始数据
      handelData() {
        // console.log(this.origiData.value))
        let sheng = [];
        let shi = [];
        let qu = [];
        this.origiData.forEach(item => {
          sheng.push(item.name);
          // 设置出初始化的数据
          if (item.name == '董事会') {
            item.children.forEach(child => {
              shi.push(child.name);
              if (child.name == '项目部') {
                child.children.forEach(el => {
                  qu.push(el.name);
                });
              }
            });
          }
        });
        this.columns.push(
          JSON.parse(JSON.stringify(sheng)),
          JSON.parse(JSON.stringify(shi)),
          JSON.parse(JSON.stringify(qu))
        );
      },
      changeHandler(e) {
        console.log(e, 333);
        const {
          columnIndex,
          value,
          values, // values为当前变化列的数组内容
          index,
          // 微信小程序无法将picker实例传出来,只能通过ref操作
          picker = this.$refs.uPicker
        } = e;
        // 当第一列值发生变化时,变化第二列(后一列)对应的选项
        if (columnIndex == 0) {
          // console.log(value)
          // picker为选择器this实例,变化第二列对应的选项
          this.origiData.forEach(item => {
            if (value[0] == item.name) {
              let shi = [];
              let flag = item.children[0];
              if(flag == undefined){
                picker.setColumnValues(1, shi);
                picker.setColumnValues(2, []);
                return
              }
              item.children.forEach((val, ol) => {
                shi.push(val.name);
                if (shi[0] == flag.name) { //设置默认开关(选择省份后设置默认城市)
                  flag = '';
                  let qu = [];
                  val.children.forEach(vol => {
                    qu.push(vol.name);
                  });
                  picker.setColumnValues(2, qu);
                }
              });
              picker.setColumnValues(1, shi);
            }
          });
        }
        //当第二列变化时,第三列对应变化
        if (columnIndex == 1) {
          this.origiData.forEach(item => {
            if (value[0] == item.name) {
              let shi = [];
              item.children.forEach((val, ol) => {
                shi.push(val.name);
                if (value[1] == val.name) {
                  let qu = [];
                  val.children.forEach(vol => {
                    qu.push(vol.name);
                  });
                  picker.setColumnValues(2, qu);
                }
              });
            }
          });
        }
      },
      // 确认选中的数据
      confirm(e) {
        console.log('confirm', JSON.stringify(e));
        this.value = e.namae[0] + e.namae[1] + e.namae[2]
        this.shows = false;
      },
相关文章
|
2月前
uniapp自定义头部导航怎么实现?
uniapp自定义头部导航怎么实现?
|
3月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
75 0
|
3月前
|
小程序 API 索引
uniapp中uview组件库中丰富的Picker 选择器用法
uniapp中uview组件库中丰富的Picker 选择器用法
222 0
|
4月前
|
JSON 数据格式
uniapp自定义头部导航样式
uniapp自定义头部导航样式
56 0
|
5月前
|
JSON 小程序 开发工具
uniapp获取接口数据,渲染在picker选择器里面
uniapp获取接口数据,渲染在picker选择器里面
74 0
|
6月前
uniapp自定义过滤器filter.js
uniapp自定义过滤器filter.js
65 0
|
3月前
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
34 0
|
17天前
|
小程序 程序员
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)
13 0
|
2月前
|
JavaScript API
uniapp自定义导航栏方法
uniapp自定义导航栏方法
42 0
|
6月前
|
开发者
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
【 uniapp - 黑马优购 | 商品列表 】如何实现数据获取、结构渲染、自定义组件的封装
190 0

热门文章

最新文章