隨著后臺管理項目的開發，左側樹狀，右側則為列表的需求越來越多，還有就是拆分該數組，只展示其中一個對象等需求。廢話不多說，直接上代碼
<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>
