uview-plus多列模式与多列联动实践

项目场景：部门多级联动，实现效果：

选项数组的格式如下：

        party_info: [
            ['一级部门 1','一级部门 ,2','一级部门 3','一级部门 4'],
            ['二级部门 1','二级部门 ,2','二级部门 3'],
            ['三级部门 1','三级部门 ,2']
        ]

先感谢组件的力量，官方链接

https://uiadmin.net/uview-plus/components/picker.html

在使用组件的过程中，changeHandler的方法中有个函数是不能直接使用的，见下图 ：

我的方法：

	const changeHandler = (e : any) => {
		const { columnIndex, value } = e;
		// 第一列
		if (columnIndex === 0) {
			picker.value.loading = true;
			picker.value.columns.splice(1, 4)
			party1_api({ id: value[0].id }).then((res : any) => {
				if (res.code == 1) {
					picker.value.columns[1] = res.data[0]
				} else {
					return
				}
			})
			picker.value.loading = false;
		}
		// 第二列
		if (columnIndex === 1) {
			picker.value.loading = true;
			picker.value.columns.splice(2, 3)
			party1_api({ id: value[1].id }).then((res : any) => {
				if (res.code == 1) {
					picker.value.columns[2] = res.data[0]
				} else {
					return
				}
			})
			picker.value.loading = false;
		}
		// 第三列
		if (columnIndex === 2) {
			picker.value.loading = true;
			picker.value.columns.splice(3, 2)
			party1_api({ id: value[2].id }).then((res : any) => {
				if (res.code == 1) {
					picker.value.columns[3] = res.data[0]
				} else {
					return
				}
			})
			picker.value.loading = false;
		}
		// 第四列
		if (columnIndex === 3) {
			picker.value.loading = true;
			picker.value.columns.splice(4, 1)
			party1_api({ id: value[3].id }).then((res : any) => {
				if (res.code == 1) {
					picker.value.columns[4] = res.data[0]
				} else {
					return
				}
			})
			picker.value.loading = false;
		}
	}

 核心就是对 options 数组的控制，写的有点长，可以再次封装优化。

其他代码（参考）

选择器：

<!-- 部门输入框 -->
			<fui-input required label="申请部门" placeholder="请选择申请部门" v-model="data.add.party_text">
				<fui-button type="gray" bold width="200rpx" height="64rpx" :size="28" text="选择部门"
					@click="choose('party')"></fui-button>
			</fui-input>

	
<!-- 选择器 -->
	<up-picker :show="picker.show" ref="uPickerRef" :loading="picker.loading" :columns="picker.columns" keyName="name"
		@confirm="confirm" @change="changeHandler" @cancel="picker.show=false"></up-picker>

choose 事件

	const choose = (e : string) => {
		if (e == 'party') {
			// 请求部门一级数据
			party1_api({}).then((res : any) => {
				if (res.code == 1) {
					picker.value.columns = res.data
					// 请求第一个部门的信息
					let id = res.data[0][0].id
					party1_api({ id: id }).then((res : any) => {
						if (res.code == 1) {
							picker.value.columns[1] = res.data[0]
						} else {
							return
						}
					})
				} else {
					return
				}
			})
			// 打开部门选择器
			picker.value.show = true
		}
	}

选择器绑定的数据部分：

	const picker = ref({
		show: false,
		uPickerRef: null,
		loading: false,
		// party_info: [],
		// staff_info: [],
		columns: [] as any,
	})

api 接口

/**
 * 请求部门信息 1
 * @param data 请求参数
 */
export const party1_api = (params:any) => {
	return http({
		method: 'GET',
		url: 'vue/supplier/party1',
		data: params
	})

后端（php）

   // 部门一级
   public function party1($id=194){
       $row = Department::where('parent_id',$id)->field('id,name')->select();
       if($row){
             $this->success('查询成功',[$row]);
         }else{
             $this->error('找不到数据！');
         }
   }