modelselecttree v1.0.3

安装

# 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
			})
		},
	},
}

属性说明

defaultProps

fileds

事件