uview3.0picker实现多级选择

开心开心~~~~

已于 2023-12-14 14:32:03 修改

阅读量1.8k

点赞数 11

文章标签： java 前端服务器

于 2023-12-14 14:13:21 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61848095/article/details/134993398

版权

本文介绍了如何在Vue应用中使用u-picker组件实现三级联动数据选择，包括数据结构的定义、初始化数据获取、滑动更新数据的处理和事件监听。

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

实现效果如图：

先给大家看下我们的数据结构，然后大家根据自己的数据结构来

 <u-picker ref="picker11" :show="showDepartment" :columns="departmentActions" @change="departmentChangeHandler"
            @confirm="departmentSelect" @cancel="showDepartment = false" keyName="fullName" immediateChange></u-picker>

1.定义一个初始数数据用于存放数组

let departmentActions = reactive([] as any);

2.初始获取数据，在onLoad中调用方法，因为初始化只会展示所有的第一层数据，因此只需要获取第一层的数据，index为0就可以了。

const departmentColumns = ref([] as any); //部门岗位数据
const originalColumns = ref([] as any); //默认的子数据
const thirdData = ref([] as any);
// 部门列表
const departmentListData = async () => {
    const { send: departmentList } = useRequest(departmentListProperty, { immediate: false });
    try {
        const res = await departmentList();
        departmentColumns.value = res.data.list //第一层数据
        // 处理二级联动
        if (res.data.list[0].children == null) {
            originalColumns.value = []
        } else {
            originalColumns.value = res.data.list[0].children //第一层下面的第二层数据
        }
        if (originalColumns.value[0].children == null) {
            thirdData.value = []
        } else {
            thirdData.value = originalColumns.value[0].children //第二层下面的第三层数据
        }
        departmentActions = [departmentColumns.value, originalColumns.value, thirdData.value]
    } catch (error: any) { }
};

3.滑动更新数据，使用picker事件：@change="departmentChangeHandler"

const departmentChangeHandler = (e: any) => {
    // e里面有两个参数，columnIndex是当前选中的列，一般是第几层，index是当前选中的列的索引，一般是第几个，
    // 其中index是当前选中的列，一般是第一层。
    const { columnIndex, index } = e
    let jobDataThird = []
    if (columnIndex === 0) {
        index111.value = index
        // e里面的picker没有，setColumnValues是实例上的方法，ref获取实例
        let jobData = [];
        // 第二行的数据，循环判断是否有children，有就push到数组里面
        if (departmentColumns.value[index].children) {
            for (let i = 0; i < departmentColumns.value[index].children.length; i++) {
                jobData.push(departmentColumns.value[index].children[i]);
            }
        } else {
            jobData = [];
        }
        //使用pikcer实例上的setColumnValues方法，设置第二列的数据，第二列的索引是1，如果需要设置第一列就写0
        picker11.value!.setColumnValues(1, jobData)
        // // 第三行的数据，依次循环下去，需要多少就写多少
        if (departmentColumns.value[index].children[0].children) {
            jobDataThird = departmentColumns.value[index].children[0].children;
        } else {
            jobDataThird = [];
        }
        picker11.value!.setColumnValues(2, jobDataThird);
    }
    else if (columnIndex === 1) {
        if (departmentColumns.value[index111.value].children[index].children) {
            jobDataThird = departmentColumns.value[index111.value].children[index].children
        } else {
            jobDataThird = [];
        }
        picker11.value!.setColumnValues(2, jobDataThird);
    }
}

如果有更好的方法，希望大家告诉我谢谢~