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;
      },
相关文章
|
8月前
uniapp的form表单自定义验证规则
uniapp的form表单自定义验证规则
302 0
|
8月前
uniapp自定义头部导航怎么实现?
uniapp自定义头部导航怎么实现?
|
8月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
212 0
|
8月前
|
小程序 API 索引
uniapp中uview组件库中丰富的Picker 选择器用法
uniapp中uview组件库中丰富的Picker 选择器用法
1453 0
|
8月前
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
116 0
|
3月前
|
数据可视化 搜索推荐
重磅更新-UniApp自定义字体可视化设计
重磅更新-UniApp自定义字体可视化设计
69 0
|
6月前
|
安全
uniapp实战 —— 自定义顶部导航栏
uniapp实战 —— 自定义顶部导航栏
228 2
|
6月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
370 1
|
6月前
uniapp 添加自定义图标
uniapp 添加自定义图标
213 0
|
6月前
|
前端开发 JavaScript 索引
uniapp的u-album组件自定义删除功能
这样,你就可以在u-album组件中实现自定义的删除功能了。需要注意的是,这个删除操作只是在前端删除了图片项,并没有在后端删除对应的图片文件,如果你需要在后端也删除对应的图片文件,你还需要在删除操作后发送一个请求到后端,让后端删除对应的图片文件。
131 0