<!-- 弹出框选择树组件 -->
<modelselecttree
v-model="showModelSelectTree"
title="选择人员(单选)"
@currentPageChange="userListPageChange"
:pageSize="userDataListPageSize"
:total="userDataListTotal"
:multiple="multiple"
ref="userList"
search
searchKey="deptName"
treeNodeKey="deptId"
@nodeClick="nodeDeptClick"
:treeData="deptList"
:defaultProps="{label:'deptName',children:'children'}"
:fileds="userFileds"
:tableData="userDataList"
tableRowKey="userId"
@selectDataFn="selectUserDataFn"
/>
<el-button type="primary" @click="openModelSelectTree"
>打开modelselecttree</el-button
>
import modelselecttree from 'modelselecttree'
export default {
components: {
modelselecttree,
},
data() {
return {
// 是否显示modelselecttree组件
showModelSelectTree: false,
// 部门列表(左侧树结构)
deptList: [],
// 表格需要展示的数据字段
userFileds: [
{
label: '昵称',
prop: 'nickName',
},
{
label: '电话',
prop: 'phonenumber',
},
{
label: '部门',
prop: 'deptName',
},
],
// 表格列表数据(右侧表格)
userDataList: [],
// 表格列表的总条数(右侧表格)
userDataListTotal: 0,
// 表格列表一页的数据条数(右侧表格)
userDataListPageSize: 10,
// 表格列表当前页(右侧表格)
userDataListPageNum: 1,
// 表格是否多选
multiple: false,
}
},
methods: {
// 人员页码发生改变
userListPageChange(currentPage, node) {
this.userDataListPageNum = currentPage
this.nodeDeptClick(node)
},
// 选中的人员列表
selectUserDataFn(select) {
//select 是选中的数据(如果传入multiple则返回数组,未传入则是对象)
// ......业务逻辑
},
// 点击左侧部门树
nodeDeptClick(node) {
//node是点击的节点--->可以console.log看下console.log(node)
// tableLoading 是控制右侧表单加载是否显示
this.$refs.userList.tableLoading = true
// 下面是接口请求右侧的表单数据(listUser这个是我这边的接口,你用自己的接口就行)
listUser({
deptId: node.deptId,
pageNum: this.userDataListPageNum,
pageSize: this.userDataListPageSize,
}).then((res) => {
// 设置右侧表单列表数据
this.userDataList = res.rows
// 设置右侧表单的条数
this.userDataListTotal = res.total
this.$refs.userList.tableLoading = false
})
},
// 打开人员列表
openModelSelectTree() {
// 请求部门列表(生成树)
listDept().then((response) => {
this.deptList = response.data
// 清空表格数据
this.userDataList = []
// 清空组件中的已选数据
this.$refs.userList.selectDataList = []
this.showModelSelectTree = true
})
},
},
}