安装

# npm方式安装
npm i modelselecttree

代码示例

<!-- 弹出框选择树组件 -->
<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
			})
		},
	},
}

属性说明

| 属性名称 | 类型 | 是否必填 | 说明 | | ------------ | -------- | -------- | ---------------------------------------------------- | | v-model | Boolean | 必填 | 控制显示隐藏 | | treeData | Array[] | 必填 | 树结构数据 | | defaultProps | Object{} | 必填 | 后面详解 | | search | Boolean | -- | 是否需要搜索树结构 | | searchKey | String | -- | 搜索树结构的 key(search 必须为 true 的情况下) | | treeNodeKey | String | -- | 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 | | fileds | Array[] | 必填 | 右侧表格字段 后面详解 | | tableData | Array[] | 必填 | 表格数据 | | tableRowKey | String | 必填 | 表格数据的 key(唯一，一般传 id) | | multiple | Boolean | -- | 是否多选(默认多选) | | title | String | -- | 标题 | | treeName | String | -- | 树结构的 class | | asideName | String | -- | 侧边栏 class | | customClass | String | -- | 模态框 class | | total | Number | -- | 表格数据的总条数(默认 0) | | pageSize | Number | -- | 表格数据的一页多少条(默认 5) | | carKey | String | -- | 卡片要展示的字段(如果没有就展示表格第一项) |

defaultProps

| 属性名称 | 类型 | 是否必填 | 说明 | | -------- | ------ | -------- | ---------------------------------- | | children | String | 必填 | 指定子树为节点对象的某个属性值 | | label | String | 必填 | 指定节点标签为节点对象的某个属性值 |

fileds

| 属性名称 | 类型 | 是否必填 | 说明 | | -------- | ------ | -------- | ---------- | | label | String | 必填 | 展示的文本 | | prop | String | 必填 | 数据 |

事件

| 事件名称 | 说明 | 返回值 | | -------------------- | ---------------- | ------------------------------------------------ | | nodeClick | 当前节点被点击 | 当前节点 node | | tableSelectionChange | 表格选中事件处理 | 选中的数据 Array[]:selection | | currentPageChange | 页码改变 | 当前点击的页码(currentPage),左侧树节点对象(node) | | selectDataFn | 最终数据列表 | 返回已选的数据 Array[]:selectDataList |