modelselecttree

安装

# 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