实现效果如图:
先给大家看下我们的数据结构,然后大家根据自己的数据结构来
<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);
}
}
如果有更好的方法,希望大家告诉我谢谢~