vue+Element-ui实现树形组件、表格树

需求

要做出如下图所示的 树形表格，也就是数据之间有父子类关系的这种，可以点击展开、收缩

像上图这样的表格树

实现

1.使用树形组件

在学习树形表格之前，肯定得先搞懂普通的树形组件是怎么搞的，然后将其套到表格中就好了，请参考ElementUI官方文档中的使用方法

链接：组件 | Element 

基础用法展示

也就是数据中要有 children 作为树形组件中的 子数据

学会使用普通的树形结构之后，我们再来看 怎么使用树形的表格

2.使用树形表格

在el-table中，支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。

渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。

通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

row-key="id"和:tree-props="{children: 'children', hasChildren: 'hasChildren'}是必须的。

 数据表格区代码

1.  
   <!-- 表格数据区-->
2.  
   <el-table
3.  
   v-if="refreshTable"
4.  
   v-loading="loading"
5.  
   :data="deptList"
6.  
   row-key="id"
7.  
   :default-expand-all="isExpandAll"
8.  
   :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
9.  
   >
10.  
    <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
11.  
    <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
12.  
    ......
13.  
    ......
14.  
    ......
15.  
    </el-table>

数据的格式

数据必须要有 children，例如下面的代码，就是树形表格数据的地方，我们伪造了一点数据，也是可以展示的。

1.  
    
2.  
   // 表格树数据
3.  
   deptList: [
4.  
   {
5.  
   id: "1",
6.  
   deptName: "若依科技",
7.  
   deptStatus: 1,
8.  
   superiorId: "0",
9.  
   orderNum: 1,
10.  
    ancestors: "0",
11.  
    createTime: "2023-07-18 08:49:56",
12.  
    leaderId: "1678651668064612354",
13.  
    children: [{
14.  
    id: "1",
15.  
    deptName: "若依科技",
16.  
    deptStatus: 1,
17.  
    superiorId: "0",
18.  
    orderNum: 1,
19.  
    ancestors: "0",
20.  
    createTime: "2023-07-18 08:49:56",
21.  
    leaderId: "1678651668064612354",
22.  
    }]
23.  
    },
24.  
    ],

伪造的代码 的效果如下图

伪造数据效果图

后端返回代码格式

 我们项目中返回的数据是下面代码，只需要将后端返回的data 与前端的表格绑定即可

1.  
   {
2.  
   "status": 0,
3.  
   "data": [
4.  
   {
5.  
   "id": "1",
6.  
   "deptName": "若依科技",
7.  
   "deptStatus": 1,
8.  
   "superiorId": "0",
9.  
   "orderNum": 1,
10.  
    "ancestors": "0",
11.  
    "createTime": "2023-07-18 08:49:56",
12.  
    "leaderId": "1678651668064612354",
13.  
    "children": [
14.  
    {
15.  
    "id": "2",
16.  
    "deptName": "深圳总公司",
17.  
    "deptStatus": 1,
18.  
    "superiorId": "1",
19.  
    "orderNum": 1,
20.  
    "ancestors": "1",
21.  
    "createTime": "2023-07-18 08:50:35",
22.  
    "leaderId": "1678651883026886657",
23.  
    "children": [
24.  
    {
25.  
    "id": "4",
26.  
    "deptName": "研发部门",
27.  
    "deptStatus": 1,
28.  
    "superiorId": "2",
29.  
    "orderNum": 1,
30.  
    "ancestors": "1,2",
31.  
    "createTime": "2023-07-18 08:53:09",
32.  
    "leaderId": "1679386932135268353"
33.  
    },
34.  
    {
35.  
    "id": "5",
36.  
    "deptName": "市场部门",
37.  
    "deptStatus": 1,
38.  
    "superiorId": "2",
39.  
    "orderNum": 2,
40.  
    "ancestors": "1,2",
41.  
    "createTime": "2023-07-18 08:53:43",
42.  
    "leaderId": "1681179955059970050"
43.  
    },
44.  
    {
45.  
    "id": "6",
46.  
    "deptName": "测试部门",
47.  
    "deptStatus": 1,
48.  
    "superiorId": "2",
49.  
    "orderNum": 3,
50.  
    "ancestors": "1,2",
51.  
    "createTime": "2023-07-18 08:54:06",
52.  
    "leaderId": "1681181469627338754"
53.  
    },
54.  
    {
55.  
    "id": "1683401601626902529",
56.  
    "deptName": "新的部门",
57.  
    "deptStatus": 0,
58.  
    "superiorId": "2",
59.  
    "orderNum": 4,
60.  
    "ancestors": "1,2",
61.  
    "createTime": "2023-07-24 16:59:53",
62.  
    "leaderId": "1679386932135268353"
63.  
    }
64.  
    ]
65.  
    },
66.  
    {
67.  
    "id": "3",
68.  
    "deptName": "长沙分公司",
69.  
    "deptStatus": 1,
70.  
    "superiorId": "1",
71.  
    "orderNum": 2,
72.  
    "ancestors": "1",
73.  
    "createTime": "2023-07-18 08:51:43",
74.  
    "leaderId": "1679385454339403778",
75.  
    "children": [
76.  
    {
77.  
    "id": "7",
78.  
    "deptName": "市场部门",
79.  
    "deptStatus": 1,
80.  
    "superiorId": "3",
81.  
    "orderNum": 1,
82.  
    "ancestors": "1,3",
83.  
    "createTime": "2023-07-18 08:54:26",
84.  
    "leaderId": "1681181510534385666"
85.  
    }
86.  
    ]
87.  
    }
88.  
    ]
89.  
    }
90.  
    ],
91.  
    "success": true
92.  
    }

真实数据效果图

前端全部代码

不建议直接看此处代码，写的杂而乱，建议先去看前面的简洁的代码 

1.  
   <template>
2.  
   <!--与若依相比修改的地方：
3.  
   所有的parentId 修改成 superiorId
4.  
   所有的 deptId 修改成 id
5.  
   所有的 status 修改成 deptStatus
6.  
   -->
7.  
   <div class="app-container">
8.  
   <!-- 头部搜索区-->
9.  
   <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
10.  
    <el-form-item label="部门名称" prop="deptName">
11.  
    <el-input
12.  
    v-model="queryParams.deptName"
13.  
    placeholder="请输入部门名称"
14.  
    clearable
15.  
    @keyup.enter.native="handleQuery"
16.  
    />
17.  
    </el-form-item>
18.  
     
19.  
     
20.  
    <el-form-item label="状态" prop="deptStatus">
21.  
    <el-select v-model="queryParams.deptStatus" placeholder="请选择状态">
22.  
    <el-option
23.  
    v-for="item in statusOptions"
24.  
    :key="item.value"
25.  
    :label="item.label"
26.  
    :value="item.value">
27.  
    </el-option>
28.  
    </el-select>
29.  
    </el-form-item>
30.  
     
31.  
     
32.  
     
33.  
    <el-form-item>
34.  
    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
35.  
    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
36.  
    </el-form-item>
37.  
    </el-form>
38.  
     
39.  
     
40.  
     
41.  
     
42.  
    <!-- 展开折叠、搜索区-->
43.  
    <el-row :gutter="10" class="mb8">
44.  
    <el-col :span="1.5">
45.  
    <el-button
46.  
    type="primary"
47.  
    plain
48.  
    icon="el-icon-plus"
49.  
    size="mini"
50.  
    @click="handleAdd"
51.  
    v-hasPermi="['system:dept:add']"
52.  
    >新增</el-button>
53.  
    </el-col>
54.  
    <el-col :span="1.5">
55.  
    <el-button
56.  
    type="info"
57.  
    plain
58.  
    icon="el-icon-sort"
59.  
    size="mini"
60.  
    @click="toggleExpandAll"
61.  
    >展开/折叠</el-button>
62.  
    </el-col>
63.  
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
64.  
    </el-row>
65.  
     
66.  
    <!-- 表格数据区-->
67.  
    <el-table
68.  
    v-if="refreshTable"
69.  
    v-loading="loading"
70.  
    :data="deptList"
71.  
    row-key="id"
72.  
    :default-expand-all="isExpandAll"
73.  
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
74.  
    >
75.  
    <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
76.  
    <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
77.  
    <el-table-column prop="deptStatus" label="状态" width="100">
78.  
    <!-- <template slot-scope="scope">-->
79.  
    <!-- <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>-->
80.  
    <!-- </template>-->
81.  
    <template slot-scope="scope">
82.  
    <el-tag type="success" effect="dark" v-if="scope.row.deptStatus==1">正常</el-tag>
83.  
    <el-tag type="warning" effect="dark" v-if="scope.row.deptStatus==0">停用</el-tag>
84.  
    </template>
85.  
     
86.  
    </el-table-column>
87.  
    <el-table-column label="创建时间" align="center" prop="createTime" width="200">
88.  
    <template slot-scope="scope">
89.  
    <span>{{ parseTime(scope.row.createTime) }}</span>
90.  
    </template>
91.  
    </el-table-column>
92.  
    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
93.  
    <template slot-scope="scope">
94.  
    <el-button
95.  
    size="mini"
96.  
    type="text"
97.  
    icon="el-icon-edit"
98.  
    @click="handleUpdate(scope.row)"
99.  
    v-hasPermi="['system:dept:edit']"
100.  
     >修改</el-button>
101.  
     <el-button
102.  
     size="mini"
103.  
     type="text"
104.  
     icon="el-icon-plus"
105.  
     @click="handleAdd(scope.row)"
106.  
     v-hasPermi="['system:dept:add']"
107.  
     >新增</el-button>
108.  
     <el-button
109.  
     v-if="scope.row.superiorId != 0"
110.  
     size="mini"
111.  
     type="text"
112.  
     icon="el-icon-delete"
113.  
     @click="handleDelete(scope.row)"
114.  
     v-hasPermi="['system:dept:remove']"
115.  
     >删除</el-button>
116.  
     </template>
117.  
     </el-table-column>
118.  
     </el-table>
119.  
      
120.  
     <!-- 添加或修改部门对话框 -->
121.  
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
122.  
     <el-form ref="form" :model="form" :rules="rules" label-width="80px">
123.  
     <el-row>
124.  
     <el-col :span="24" v-if="form.superiorId !== 0">
125.  
      
126.  
     <el-form-item label="上级部门" prop="superiorId">
127.  
     <!-- <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />-->
128.  
     <el-input v-model="form.superiorId" placeholder="请输入上级部门id" />
129.  
     </el-form-item>
130.  
      
131.  
     </el-col>
132.  
     </el-row>
133.  
     <el-row>
134.  
     <el-col :span="12">
135.  
     <el-form-item label="部门名称" prop="deptName">
136.  
     <el-input v-model="form.deptName" placeholder="请输入部门名称" />
137.  
     </el-form-item>
138.  
     </el-col>
139.  
     <el-col :span="12">
140.  
     <el-form-item label="显示排序" prop="orderNum">
141.  
     <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
142.  
     </el-form-item>
143.  
     </el-col>
144.  
     </el-row>
145.  
      
146.  
     <!-- 负责人信息只做显示，不可修改-->
147.  
     <el-row>
148.  
     <!-- <el-col :span="12">-->
149.  
     <!-- <el-form-item label="负责人id" prop="leader">-->
150.  
     <!-- <el-input v-model="form.leaderId" placeholder="请输入负责人id" maxlength="20" :disabled="true" />-->
151.  
     <!-- </el-form-item>-->
152.  
     <!-- </el-col>-->
153.  
     <el-col :span="12">
154.  
     <el-form-item label="负责人姓名" prop="leader">
155.  
     <el-input v-model="form.userName" placeholder="请输入负责人姓名" maxlength="20" :disabled="true" />
156.  
     </el-form-item>
157.  
     </el-col>
158.  
      
159.  
     <el-col :span="12">
160.  
     <el-form-item label="联系电话" prop="phone">
161.  
     <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" :disabled="true"/>
162.  
     </el-form-item>
163.  
     </el-col>
164.  
     </el-row>
165.  
     <el-row>
166.  
     <el-col :span="12">
167.  
     <el-form-item label="邮箱" prop="email">
168.  
     <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" :disabled="true"/>
169.  
     </el-form-item>
170.  
     </el-col>
171.  
      
172.  
      
173.  
     <el-col :span="12">
174.  
     <el-form-item label="部门状态" prop="email">
175.  
     <el-input v-model="form.deptStatus" placeholder="请输入部门状态" maxlength="50" :disabled="true"/>
176.  
     </el-form-item>
177.  
     </el-col>
178.  
      
179.  
     <el-form-item label="状态" prop="deptStatus">
180.  
     <el-select v-model="form.deptStatus" placeholder="请选择状态">
181.  
     <el-option
182.  
     v-for="item in statusOptions"
183.  
     :key="item.value"
184.  
     :label="item.label"
185.  
     :value="item.value">
186.  
     </el-option>
187.  
     </el-select>
188.  
     </el-form-item>
189.  
      
190.  
     <!-- <el-col :span="12">-->
191.  
     <!-- <el-form-item label="部门状态">-->
192.  
      
193.  
     <!-- <el-switch-->
194.  
     <!-- v-model="form.deptStatus"-->
195.  
     <!-- active-value="1"-->
196.  
     <!-- inactive-value="0"-->
197.  
     <!-- active-color="#13ce66"-->
198.  
     <!-- inactive-color="#ff4949">-->
199.  
     <!-- </el-switch>-->
200.  
      
201.  
     <!-- <el-radio v-model="form.deptStatus" label="1" >正常</el-radio>-->
202.  
     <!-- <el-radio v-model="form.deptStatus" label="0" >停用</el-radio>-->
203.  
      
204.  
      
205.  
     <!-- </el-form-item>-->
206.  
     <!-- </el-col>-->
207.  
     </el-row>
208.  
     </el-form>
209.  
     <div slot="footer" class="dialog-footer">
210.  
     <el-button type="primary" @click="submitForm">确 定</el-button>
211.  
     <el-button @click="cancel">取 消</el-button>
212.  
     </div>
213.  
     </el-dialog>
214.  
     </div>
215.  
     </template>
216.  
      
217.  
     <script>
218.  
     // import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
219.  
     import Treeselect from "@riophae/vue-treeselect";
220.  
     import "@riophae/vue-treeselect/dist/vue-treeselect.css";
221.  
     import axios from 'axios'
222.  
      
223.  
     export default {
224.  
     name: "Dept",
225.  
     dicts: ['sys_normal_disable'],
226.  
     components: { Treeselect },
227.  
     data() {
228.  
     return {
229.  
      
230.  
      
231.  
      
232.  
     urls:{
233.  
     listDept2:'/dept/list',// 查询部门列表：普通
234.  
     listDept:'/dept/getDeptTree',// 查询部门列表：树形
235.  
     addDept:'/dept/insert', // 新增部门
236.  
     delDept: '/dept/delete/',// 删除部门
237.  
     updateDept:'/dept/update',// 修改部门
238.  
     selectDeptById:'/dept/selectDeptById',// 根据id查询
239.  
      
240.  
     getDept:'/system/dept/',// 查询部门详细
241.  
      
242.  
      
243.  
      
244.  
     listDeptExcludeChild:'/user/add', // 查询部门列表（排除节点）
245.  
      
246.  
      
247.  
      
248.  
     },
249.  
      
250.  
     statusOptions:[
251.  
     {
252.  
     value: '0',
253.  
     label: '停用'
254.  
     },
255.  
     {
256.  
     value: '1',
257.  
     label: '正常'
258.  
     },
259.  
     ],
260.  
      
261.  
      
262.  
      
263.  
     //区分提交按钮：有提交id 就是修改，没有就是添加，因为修改需要id，添加不需要id
264.  
     submitId: undefined,
265.  
     // 遮罩层
266.  
     loading: false,
267.  
     // 显示搜索条件
268.  
     showSearch: true,
269.  
     // 表格树数据
270.  
     deptList: [
271.  
     {
272.  
     // id: "1",
273.  
     // deptName: "若依科技",
274.  
     // deptStatus: 1,
275.  
     // superiorId: "0",
276.  
     // orderNum: 1,
277.  
     // ancestors: "0",
278.  
     // createTime: "2023-07-18 08:49:56",
279.  
     // leaderId: "1678651668064612354",
280.  
     //
281.  
     // children: [{
282.  
     // id: "1",
283.  
     // deptName: "若依科技",
284.  
     // deptStatus: 1,
285.  
     // superiorId: "0",
286.  
     // orderNum: 1,
287.  
     // ancestors: "0",
288.  
     // createTime: "2023-07-18 08:49:56",
289.  
     // leaderId: "1678651668064612354",
290.  
     // }]
291.  
     },
292.  
     ],
293.  
     // 部门树选项
294.  
     deptOptions: [],
295.  
     // 弹出层标题
296.  
     title: "",
297.  
     // 是否显示弹出层
298.  
     open: false,
299.  
     // 是否展开，默认全部展开
300.  
     isExpandAll: true,
301.  
     // 重新渲染表格状态
302.  
     refreshTable: true,
303.  
     // 查询参数
304.  
     queryParams: {
305.  
     deptName: undefined,
306.  
     deptStatus: undefined,
307.  
     },
308.  
     // 表单参数
309.  
     form: {
310.  
     },
311.  
     // 表单校验
312.  
     rules: {
313.  
     // parentId: [
314.  
     superiorId: [
315.  
     { required: true, message: "上级部门不能为空", trigger: "blur" }
316.  
     ],
317.  
     deptName: [
318.  
     { required: true, message: "部门名称不能为空", trigger: "blur" }
319.  
     ],
320.  
     orderNum: [
321.  
     { required: true, message: "显示排序不能为空", trigger: "blur" }
322.  
     ],
323.  
     // email: [
324.  
     // {
325.  
     // type: "email",
326.  
     // message: "请输入正确的邮箱地址",
327.  
     // trigger: ["blur", "change"]
328.  
     // }
329.  
     // ],
330.  
     // phone: [
331.  
     // {
332.  
     // pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
333.  
     // message: "请输入正确的手机号码",
334.  
     // trigger: "blur"
335.  
     // }
336.  
     // ]
337.  
     }
338.  
     };
339.  
     },
340.  
     created() {
341.  
     this.getList();
342.  
     },
343.  
     methods: {
344.  
      
345.  
      
346.  
      
347.  
     /** 查询部门列表：查出树形结构 */
348.  
     getList() {
349.  
     axios({
350.  
     method:"get",
351.  
     url:this.urls.listDept,
352.  
     params: {
353.  
     deptName : this.queryParams.deptName,
354.  
     deptStatus : this.queryParams.deptStatus,
355.  
     }
356.  
     }).then(res => {
357.  
     this.deptList = res.data.data;
358.  
     }
359.  
     );
360.  
     },
361.  
      
362.  
      
363.  
      
364.  
      
365.  
     /** 转换部门数据结构 */
366.  
     normalizer(node) {
367.  
     if (node.children && !node.children.length) {
368.  
     delete node.children;
369.  
     }
370.  
     return {
371.  
     // id: node.deptId,
372.  
     id: node.id,
373.  
     label: node.deptName,
374.  
     children: node.children
375.  
     };
376.  
     },
377.  
     // 取消按钮
378.  
     cancel() {
379.  
     this.open = false;
380.  
     this.reset();
381.  
     },
382.  
     // 表单重置
383.  
     reset() {
384.  
     //添加、修改 框数据清空
385.  
     this.form = {
386.  
     // deptId: undefined,
387.  
     // parentId: undefined,
388.  
     id: undefined,
389.  
     superiorId: undefined,
390.  
     deptName: undefined,
391.  
     orderNum: undefined,
392.  
     leader: undefined,
393.  
     phone: undefined,
394.  
     email: undefined,
395.  
     deptStatus: undefined,
396.  
     };
397.  
     // this.resetForm("form");
398.  
     //搜索框 数据清空
399.  
     this.queryParams = {
400.  
     deptName: undefined,
401.  
     deptStatus: ' ',
402.  
      
403.  
     };
404.  
      
405.  
     },
406.  
     /** 搜索按钮操作 */
407.  
     handleQuery() {
408.  
     // this.getList();
409.  
      
410.  
     //搜索功能没有做树形结构，按照普通结构来的
411.  
     //先清空表格数据
412.  
     this.deptList = undefined;
413.  
     axios({
414.  
     method:"get",
415.  
     url:this.urls.listDept2,
416.  
     params: {
417.  
     deptName : this.queryParams.deptName,
418.  
     deptStatus : this.queryParams.deptStatus,
419.  
     }
420.  
     }).then(res => {
421.  
     this.deptList = res.data.data;
422.  
     }
423.  
     );
424.  
     },
425.  
     /** 重置按钮操作 */
426.  
     resetQuery() {
427.  
     this.queryParams = {
428.  
     deptName: undefined,
429.  
     deptStatus: undefined,
430.  
      
431.  
     };
432.  
     this.getList();
433.  
     },
434.  
     /** 新增 添加 按钮操作 */
435.  
     handleAdd(row) {
436.  
     this.reset();//表单重置
437.  
     //将 提交按钮 存的id清空了
438.  
     this.submitId = undefined
439.  
     if (row != undefined) {
440.  
     // this.form.parentId = row.deptId;
441.  
     this.form.superiorId = row.id;
442.  
     }
443.  
     this.open = true;
444.  
     this.title = "添加部门";
445.  
     },
446.  
     /** 展开/折叠操作 */
447.  
     toggleExpandAll() {
448.  
     this.refreshTable = false;
449.  
     this.isExpandAll = !this.isExpandAll;
450.  
     this.$nextTick(() => {
451.  
     this.refreshTable = true;
452.  
     });
453.  
     },
454.  
      
455.  
     /** 修改按钮操作 */
456.  
     handleUpdate(row) {
457.  
     // this.reset();
458.  
     this.submitId = row.id;
459.  
     //先拿着部门id去查询出来这条数据，并连带这将他的负责人信息查询出来，再把数据赋给form
460.  
     axios({
461.  
     method:"get",
462.  
     url:this.urls.selectDeptById,
463.  
     params: {
464.  
     id : row.id,
465.  
     }
466.  
     }).then(res => {
467.  
     //查询成功后复制给 修改弹框
468.  
     this.form = res.data.data;
469.  
      
470.  
     }
471.  
     );
472.  
      
473.  
     this.open = true;
474.  
     this.title = "修改部门";
475.  
      
476.  
      
477.  
     },
478.  
     /** 提交按钮 */
479.  
     submitForm: function() {
480.  
     this.$refs["form"].validate(valid => {
481.  
     if (valid) {
482.  
     if (this.submitId != undefined) {//是修改，不是添加
483.  
      
484.  
     axios({
485.  
     method:"post",
486.  
     url:this.urls.updateDept,
487.  
     data: {
488.  
     id:this.submitId,
489.  
     deptName:this.form.deptName,
490.  
     leaderId:this.form.leaderId,
491.  
     // 修改的状态怎么 单选框？
492.  
     deptStatus:this.form.deptStatus,
493.  
     superiorId:this.form.superiorId,
494.  
     ancestors:this.form.ancestors,
495.  
     orderNum:this.form.orderNum,
496.  
      
497.  
     }
498.  
     }).then(res => {
499.  
     this.$message({
500.  
     type: 'success',
501.  
     message: '修改成功!'
502.  
     });
503.  
     this.open = false;
504.  
     this.getList();
505.  
     }
506.  
     );
507.  
      
508.  
     } else {//添加
509.  
      
510.  
      
511.  
     axios({
512.  
     method:"post",
513.  
     url:this.urls.addDept,
514.  
     data: {
515.  
     deptName:this.form.deptName,
516.  
     //负责人id???直接从查询的数据中取
517.  
     leaderId:this.form.leaderId,
518.  
     deptStatus:this.form.deptStatus,
519.  
     superiorId:this.form.superiorId,
520.  
     ancestors:this.form.ancestors,
521.  
     orderNum:this.form.orderNum,
522.  
     }
523.  
     }).then(res => {
524.  
     this.$message({
525.  
     type: 'success',
526.  
     message: '添加成功!'
527.  
     });
528.  
      
529.  
     this.open = false;
530.  
     this.getList();
531.  
     }
532.  
     );
533.  
      
534.  
     }
535.  
     }
536.  
     });
537.  
     },
538.  
     /** 删除按钮操作 */
539.  
     handleDelete(row) {
540.  
      
541.  
     this.$confirm('是否删除选中的所有部门？删除后无法恢复!', '提示', {
542.  
     confirmButtonText: '确定',
543.  
     cancelButtonText: '取消',
544.  
     type: 'warning'
545.  
     }).then(() => {
546.  
     axios({
547.  
     method:"get",
548.  
     url:this.urls.delDept,
549.  
     params: {
550.  
     id : row.id,
551.  
     }
552.  
     }).then(res => {
553.  
     if(res.data.deptStatus===0){
554.  
     this.getList();
555.  
     this.$message({
556.  
     type: 'success',
557.  
     message: '删除成功!'
558.  
     });
559.  
     }else{
560.  
     this.$message({
561.  
     type: 'error',
562.  
     message: res.data.msg
563.  
     });
564.  
     }
565.  
     }
566.  
     );
567.  
      
568.  
     }).catch(() => {});
569.  
      
570.  
      
571.  
     },
572.  
     //时间解析
573.  
     parseTime(time, pattern) {
574.  
     if (arguments.length === 0 || !time) {
575.  
     return null
576.  
     }
577.  
     const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
578.  
     let date
579.  
     if (typeof time === 'object') {
580.  
     date = time
581.  
     } else {
582.  
     if ((typeof time === 'string') && (/^[0-9] $/.test(time))) {
583.  
     time = parseInt(time)
584.  
     } else if (typeof time === 'string') {
585.  
     time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
586.  
     }
587.  
     if ((typeof time === 'number') && (time.toString().length === 10)) {
588.  
     time = time * 1000
589.  
     }
590.  
     date = new Date(time)
591.  
     }
592.  
     const formatObj = {
593.  
     y: date.getFullYear(),
594.  
     m: date.getMonth() 1,
595.  
     d: date.getDate(),
596.  
     h: date.getHours(),
597.  
     i: date.getMinutes(),
598.  
     s: date.getSeconds(),
599.  
     a: date.getDay()
600.  
     }
601.  
     const time_str = format.replace(/{(y|m|d|h|i|s|a) }/g, (result, key) => {
602.  
     let value = formatObj[key]
603.  
     // Note: getDay() returns 0 on Sunday
604.  
     if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
605.  
     if (result.length > 0 && value < 10) {
606.  
     value = '0' value
607.  
     }
608.  
     return value || 0
609.  
     })
610.  
     return time_str
611.  
     },
612.  
     }
613.  
     };
614.  
     </script>

这篇好文章是转载于：学新通技术网