随着后台管理项目的开发，左侧树状，右侧则为列表的需求越来越多，还有就是拆分该数组，只展示其中一个对象等需求。废话不多说，直接上代码
<template><div><el-row :gutter="20"><el-col :span="6" :xs="24"><div class="head-container"><el-inputv-model="deptName"placeholder="请输入名称"clearablesize="small"prefix-icon="el-icon-search"style="margin-bottom: 20px"/></div><div class="head-container"><el-tree:data="deptOptions":props="defaultProps":expand-on-click-node="false":filter-node-method="filterNode"ref="tree"node-key="id"default-expand-allhighlight-current@node-click="handleNodeClick"/></div></el-col><!--用户数据--><el-col :span="18" :xs="24"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="用户名称" prop="userName"><el-inputv-model="queryParams.userName"placeholder="请输入用户名称"clearablestyle="width: 150px"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item label="手机号码" prop="phonenumber"><el-inputv-model="queryParams.phonenumber"placeholder="请输入手机号码"clearablestyle="width: 150px"@keyup.enter.native="handleQuery"/></el-form-item><el-form-item><el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button><el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button></el-form-item></el-form><el-table v-show="checkType === 'multiple'" ref="dataTable" v-loading="loading" :row-key="getRowKey" :data="userList" @selection-change="handleMultipleUserSelect"><el-table-column type="selection" :reserve-selection="true" width="50" align="center" /><el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" /><el-table-column label="登录账号" align="center" key="username" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /><el-table-column label="用户姓名" align="center" key="realName" prop="realName" v-if="columns[2].visible" :show-overflow-tooltip="true" /><!-- <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" /> --><el-table-column label="手机号码" align="center" key="phone" prop="phone" v-if="columns[4].visible" width="120" /></el-table><el-table v-show="checkType === 'single'" v-loading="loading" :data="userList" @current-change="handleSingleUserSelect"><el-table-column width="55" align="center" ><template slot-scope="scope"><el-radio v-model="radioSelected" :label="scope.row.id">{{''}}</el-radio></template></el-table-column><el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" /><el-table-column label="登录账号" align="center" key="username" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /><el-table-column label="用户姓名" align="center" key="realName" prop="realName" v-if="columns[2].visible" :show-overflow-tooltip="true" /><el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" /><el-table-column label="手机号码" align="center" key="phone" prop="phone" v-if="columns[4].visible" width="120" /></el-table><el-table v-show="checkType === 'department'" v-loading="loading" :data="userList" @current-change="handleSingleUserSelect"><el-table-column width="55" align="center" ></el-table-column><el-table-column label="用户编号" align="center" key="id" prop="id" v-if="columns[0].visible" /><el-table-column label="登录账号" align="center" key="username" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" /><el-table-column label="用户姓名" align="center" key="realName" prop="realName" v-if="columns[2].visible" :show-overflow-tooltip="true" /><el-table-column label="部门" align="center" key="deptName" prop="dept.deptName" v-if="columns[3].visible" :show-overflow-tooltip="true" /><el-table-column label="手机号码" align="center" key="phone" prop="phone" v-if="columns[4].visible" width="120" /></el-table><paginationv-show="total>0":total="total":page-sizes="[5,10]":page.sync="queryParams.pageNum":limit.sync="queryParams.pageSize"@pagination="getList"/></el-col></el-row></div>
</template><script>
import { listUser, deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {StrUtil} from "@/util/StrUtil";export default {name: "FlowUser",dicts: ['sys_normal_disable', 'sys_user_sex'],components: { Treeselect },// 接受父组件的值props: {// 回显数据传值selectValues: {type: Number | String | Array,default: null,required: false},// 表格类型checkType: {type: String,default: 'multiple',required: true},},data() {return {// 遮罩层loading: true,// 选中数组ids: [],// 非单个禁用single: true,// 非多个禁用multiple: true,// 显示搜索条件showSearch: true,// 总条数total: 0,// 用户表格数据userList: [],// 弹出层标题title: "",// 部门树选项deptOptions: undefined,// 是否显示弹出层open: false,// 部门名称deptName: undefined,// 表单参数form: {},defaultProps: {children: "children",label: "label"},// 查询参数queryParams: {pageNum: 1,pageSize: 5,userName: undefined,phonenumber: undefined,status: undefined,deptId:''},// 列信息columns: [{ key: 0, label: `用户编号`, visible: true },{ key: 1, label: `用户名称`, visible: true },{ key: 2, label: `用户昵称`, visible: true },{ key: 3, label: `部门`, visible: true },{ key: 4, label: `手机号码`, visible: true },{ key: 5, label: `状态`, visible: true },{ key: 6, label: `创建时间`, visible: true }],radioSelected: null, // 单选框传值selectUserList: [] // 回显数据传值};},watch: {deptName(val) {this.$refs.tree.filter(val);},selectValues: {handler(newVal) {if(!newVal){this.radioSelected = null}if (StrUtil.isNotBlank(newVal)) {if (!newVal instanceof Number) {this.radioSelected = newValthis.selectValues = newVal}else{this.selectUserList = newVal;}}},immediate: true},userList: {handler(newVal) {if (StrUtil.isNotBlank(newVal) && this.selectUserList.length > 0) {this.$nextTick(() => {this.$refs.dataTable.clearSelection();this.selectUserList.split(',').forEach(key => {this.$refs.dataTable.toggleRowSelection(newVal.find(item => key == item.userId), true)});});}},immediate: true, // 立即生效deep: true //监听对象或数组的时候，要用到深度监听}},created() {this.getDeptTree();this.getList();},methods: {/** 查询用户列表 */getList() {// this.loading = true;console.log(this.queryParams,'1222222212')listUser(this.queryParams).then(response => {console.log(response);this.userList = response.data.data.records;this.total = response.data.data.total;});this.loading = false;},/** 查询部门下拉树结构 */getDeptTree() {deptTreeSelect().then(response => {let childrenList =[]if( response.data.data[0]!=undefined){if(response.data.data[0].children != undefined){response.data.data[0].children.map(item =>{childrenList = response.data.data[0].children.filter(item => item.label === '销售部');})}}response.data.data[0].children.length = 0response.data.data[0].children = childrenListthis.queryParams.deptId = response.data.data[0].children[0].idthis.deptOptions = response.data.datathis.loading = true;listUser(this.queryParams).then(response => {this.userList = response.data.data.records;this.total = response.data.data.total;});this.loading = false;});},// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据getRowKey (row) {return row.id},// 筛选节点filterNode(value, data) {if (!value) return true;return data.label.indexOf(value) !== -1;},// 节点单击事件handleNodeClick(data) {if(this.checkType == 'department'){this.$emit('chosedepart',data)}this.queryParams.deptId = data.id;this.handleQuery();},// 多选框选中数据handleMultipleUserSelect(selection) {this.$emit('handleUserSelect', selection);},// 单选框选中数据handleSingleUserSelect(selection) {this.radioSelected = selection.id;//点击当前行时,radio同样有选中效果this.$emit('handleUserSelect', selection);},/** 搜索按钮操作 */handleQuery() {this.queryParams.pageNum = 1;this.getList();},/** 重置按钮操作 */resetQuery() {this.dateRange = [];this.queryParams.deptId = undefined;this.queryParams.userName = ''this.queryParams.phone = ''this.$refs.tree.setCurrentKey(null);this.getList();},}
};
</script>
<style>
/*隐藏radio展示的label及本身自带的样式*/
/*.el-radio__label{*/
/* display:none;*/
/*}*/
</style>
