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

选项数组的格式如下：

        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].idparty1_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('找不到数据！');}}