项目场景:部门多级联动,实现效果:
选项数组的格式如下:
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('找不到数据!');
}
}