背景

脑图可以很好的展示层级结构，但展示信息有限，并且当前的脑图无法做到真正的增量，每次保存都是整个脑图数据。而树形的表格可以根据需要展示更多节点相关的信息，如更新者、更新时间、关联的Stroy等等都能更加直观，且能做到时时增量保存。

Elemen UI 的table 自身提供了不错的功能支持，但经过一番对比，最终选取了第三方组件 Vxe-table ， 下面就直接以 Vxe-table 演示下。

效果：

image.png

全局安装

  1.       npm install xe-utils@3 vxe-table@3

main.js 添加引入，同时也可以根据需要按需引入，可以减少文件大小

  1. import 'xe-utils'
  2. import VXETable from 'vxe-table'
  3. import 'vxe-table/lib/style.css'
  5. Vue.use(VXETable)

Demo 使用

创建Data.js 格式如下：

  1. {
  2.   "code": "200",
  3.   "message": "成功",
  4.   "data": {
  5.     "spaceId": "5453",
  6.     "template": "right",
  7.     "theme": "fresh-green",
  8.     "mapVersion": "1.4.43",
  9.     "root": {
  10.       "data": {
  11.         "createUser": "xiaomin.huang01@luckincoffee.com",
  12.         "createTime": "2020-09-15 20:50:39",
  13.         "updateUser": "xiaomin.huang01@luckincoffee.com",
  14.         "updateTime": "2020-09-18 13:50:55",
  15.         "id": "c5nyfcxxfc00",
  16.         "text": "取餐方式",
  17.         "note": "",
  18.         "progress": null,
  19.         "priority": null,
  20.         "hyberlinks": {
  21.           "link": "",
  22.           "title": ""
  23.         },
  24.         "testResult": 0,
  25.         "auto": 0,
  26.         "resource": null,
  27.         "leafNode": 0,
  28.         "presentationJson": "{\"created\":1600174238683,\"expandState\":\"expand\"}",
  29.         "storyNo": "",
  30.         "latestTestResult": 0,
  31.         "latestReviewResult": 0,
  32.         "testCount": "0"
  33.       },
  34.       "children": [
  35.         {
  36.           "data": {
  37.             "createUser": "xiaomin.huang01@luckincoffee.com",
  38.             "createTime": "2020-09-15 20:56:25",
  39.             "updateUser": "xiaomin.huang01@luckincoffee.com",
  40.             "updateTime": "2020-09-18 13:50:55",
  41.             "id": "c5nyjpjpwo00",
  42.             "text": "取餐码",
  43.             "note": "",
  44.             "progress": null,
  45.             "priority": null,
  46.             "hyberlinks": {
  47.               "link": "",
  48.               "title": ""
  49.             },
  50.             "testResult": null,
  51.             "auto": null,
  52.             "resource": null,
  53.             "leafNode": 0,
  54.             "presentationJson": "{\"created\":1600174579578,\"expandState\":\"expand\"}",
  55.             "storyNo": "",
  56.             "latestTestResult": 0,
  57.             "latestReviewResult": 0,
  58.             "testCount": "0"
  59.           },
  60.           "children": [
  61.             {
  62.               "data": {
  63.                 "createUser": "xiaomin.huang01@luckincoffee.com",
  64.                 "createTime": "2020-09-15 22:04:27",
  65.                 "updateUser": "xiaomin.huang01@luckincoffee.com",
  66.                 "updateTime": "2020-09-18 13:50:55",
  67.                 "id": "c5nzzt1xf680",
  68.                 "text": "取餐码制作完成",
  69.                 "note": "",
  70.                 "progress": null,
  71.                 "priority": null,
  72.                 "hyberlinks": {
  73.                   "link": "",
  74.                   "title": ""
  75.                 },
  76.                 "testResult": null,
  77.                 "auto": null,
  78.                 "resource": null,
  79.                 "leafNode": 0,
  80.                 "presentationJson": "{\"created\":1600178662146,\"expandState\":\"expand\"}",
  81.                 "storyNo": "",
  82.                 "latestTestResult": 0,
  83.                 "latestReviewResult": 0,
  84.                 "testCount": "0"
  85.               },
  86.               "children": [
  87.                 {
  88.                   "data": {
  89.                     "createUser": "xiaomin.huang01@luckincoffee.com",
  90.                     "createTime": "2020-09-15 22:12:03",
  91.                     "updateUser": "xiaomin.huang01@luckincoffee.com",
  92.                     "updateTime": "2020-09-18 13:50:55",
  93.                     "id": "c5o05mduurk0",
  94.                     "text": "制作成功",
  95.                     "note": "",
  96.                     "progress": null,
  97.                     "priority": null,
  98.                     "hyberlinks": {
  99.                       "link": "",
  100.                       "title": ""
  101.                     },
  102.                     "testResult": null,
  103.                     "auto": null,
  104.                     "resource": null,
  105.                     "leafNode": 0,
  106.                     "presentationJson": "{\"created\":1600179117815,\"expandState\":\"expand\"}",
  107.                     "storyNo": "",
  108.                     "latestTestResult": 0,
  109.                     "latestReviewResult": 0,
  110.                     "testCount": "0"
  111.                   },
  112.                   "children": [
  113.                     {
  114.                       "data": {
  115.                         "createUser": "xiaomin.huang01@luckincoffee.com",
  116.                         "createTime": "2020-09-15 22:14:40",
  117.                         "updateUser": "xiaomin.huang01@luckincoffee.com",
  118.                         "updateTime": "2021-03-15 15:13:15",
  119.                         "id": "c5o07infjls0",
  120.                         "text": "toast提示",
  121.                         "note": "",
  122.                         "progress": null,
  123.                         "priority": 2,
  124.                         "hyberlinks": {
  125.                           "link": "",
  126.                           "title": ""
  127.                         },
  128.                         "testResult": null,
  129.                         "auto": null,
  130.                         "resource": null,
  131.                         "leafNode": 1,
  132.                         "presentationJson": "{\"created\":1600179266415,\"expandState\":\"expand\",\"updated\":1615792395856}",
  133.                         "storyNo": "",
  134.                         "latestTestResult": 0,
  135.                         "latestReviewResult": 0,
  136.                         "testCount": "0"
  137.                       },
  138.                       "children": []
  139.                     },
  140.                     {
  141.                       "data": {
  142.                         "createUser": "xiaomin.huang01@luckincoffee.com",
  143.                         "createTime": "2020-09-15 22:14:40",
  144.                         "updateUser": "xiaomin.huang01@luckincoffee.com",
  145.                         "updateTime": "2020-09-18 13:50:55",
  146.                         "id": "c5o07klqfvs0",
  147.                         "text": "提示语",
  148.                         "note": "",
  149.                         "progress": null,
  150.                         "priority": null,
  151.                         "hyberlinks": {
  152.                           "link": "",
  153.                           "title": ""
  154.                         },
  155.                         "testResult": null,
  156.                         "auto": null,
  157.                         "resource": null,
  158.                         "leafNode": 0,
  159.                         "presentationJson": "{\"created\":1600179270666,\"expandState\":\"expand\"}",
  160.                         "storyNo": "",
  161.                         "latestTestResult": 0,
  162.                         "latestReviewResult": 0,
  163.                         "testCount": "0"
  164.                       },
  165.                       "children": [
  166.                         {
  167.                           "data": {
  168.                             "createUser": "xiaomin.huang01@luckincoffee.com",
  169.                             "createTime": "2020-09-15 22:14:40",
  170.                             "updateUser": "xiaomin.huang01@luckincoffee.com",
  171.                             "updateTime": "2021-03-15 15:13:18",
  172.                             "id": "c5o07klr4xc0",
  173.                             "text": "取餐码xxx的订单已制作完成",
  174.                             "note": "",
  175.                             "progress": null,
  176.                             "priority": 2,
  177.                             "hyberlinks": {
  178.                               "link": "",
  179.                               "title": ""
  180.                             },
  181.                             "testResult": null,
  182.                             "auto": null,
  183.                             "resource": null,
  184.                             "leafNode": 1,
  185.                             "presentationJson": "{\"created\":1600179270667,\"expandState\":\"expand\",\"updated\":1615792398055}",
  186.                             "storyNo": "",
  187.                             "latestTestResult": 0,
  188.                             "latestReviewResult": 0,
  189.                             "testCount": "0"
  190.                           },
  191.                           "children": []
  192.                         }
  193.                       ]
  194.                     }
  195.                   ]
  196.                 }
  197.               ]
  198.             }
  199.           ]
  200.         }
  201.       ]
  202.     }
  203.   }
  204. }

HTML

  1. <template>
  2.   <div>
  3.     <vxe-toolbar :refresh="{query: reload}" custom>
  4.       <template #buttons>
  5.         <vxe-button @click="$refs.xTree.setAllTreeExpand(true)">
  6.           展开所有
  7.         </vxe-button>
  8.         <vxe-button @click="$refs.xTree.clearTreeExpand()">
  9.           关闭所有
  10.         </vxe-button>
  12.         <vxe-button @click="insertEvent()">
  13.           新增
  14.         </vxe-button>
  15.         <!--        <vxe-button @click="getInsertEvent">获取新增</vxe-button>-->
  16.         <vxe-button @click="getNewData">
  17.           获取新增数据
  18.         </vxe-button>
  19.         <vxe-button @click="getRemoveEvent">
  20.           获取删除
  21.         </vxe-button>
  22.         <vxe-button @click="getUpdateEvent">
  23.           获取修改
  24.         </vxe-button>
  25.       </template>
  26.     </vxe-toolbar>
  29.     <vxe-table
  30.       ref="xTree"
  31.       height="1024"
  32.       resizable
  33.       row-key
  34.       :data="tableData"
  35.       highlight-hover-row
  36.       highlight-current-row
  37.       highlight-hover-column
  38.       highlight-current-column
  39.       keep-source
  40.       :keyboard-config="{isArrow: true, isEnter: true}"
  41.       :tree-config="{children: 'children',iconClose: 'el-icon-folder',iconOpen: 'el-icon-folder-opened',line: true}"
  42.       :edit-config="{trigger: 'dblclick', mode: 'cell',showStatus: true}"
  43.       @edit-closed="editClosedEvent"
  44.     >
  45.       <!--      <vxe-column type="seq"></vxe-column>-->
  47.       <!--       行拖拽-->
  48.       <vxe-table-column width="60">
  49.         <template v-slot>
  50.               <span class="drag-btn">
  51.                 <i class="vxe-icon--menu"></i>
  52.               </span>
  53.         </template>
  54.         <template v-slot:header>
  55.           <vxe-tooltip v-model="showHelpTip" content="按住后可以上下拖动排序！" enterable>
  56.             <i class="vxe-icon--question" @click="showHelpTip = !showHelpTip"></i>
  57.           </vxe-tooltip>
  58.         </template>
  59.       </vxe-table-column>
  61.       <vxe-column
  62.         field="data.text"
  63.         title="用例描述"
  64.         width="600"
  65.         tree-node
  66.         :edit-render="{name: 'input', attrs: {type: 'text'}}"
  67.       />
  68.       <vxe-column
  69.         field="data.priority"
  70.         title="优先级"
  71.         width="100"
  72.         :edit-render="{name: '$select', options: priorityList, optionProps: {value: 'value', label: 'label'}}"
  73.         :filters="[{label: 'P0', value: '0'}, {label: 'P1', value: '1'},{label: 'P2', value: '2'},{label: 'P3', value: '3'}]"
  74.       />
  76.       <vxe-column field="data.resource" title="标签"/>
  77.       <vxe-column field="data.storyNo" title="关联Story"/>
  78.       <vxe-column field="data.latestReviewResult" title="评审结果"/>
  79.       <vxe-column field="data.note" title="备注"/>
  80.       <vxe-column field="data.updateTime" title="更新时间"/>
  81.       <vxe-column field="data.updateUser" title="更新者"/>
  82.       <!--      <vxe-column field="data.createTime" title="创建时间" />-->
  83.       <!--      <vxe-column field="data.createUser" title="创建者" />-->
  86.       <!--      <vxe-table-column field="attr3" title="Image">
  87.               <template #default>
  88.                 <img src="/vxe-table/static/other/img1.gif" height="50">
  89.               </template>
  90.             </vxe-table-column>-->
  93.       <vxe-table-column title="操作" fixed="right" width="300">
  94.         <template v-slot="scope">
  95.           <vxe-button size="small" @click="handleAddChildren(scope.rowIndex, scope.row)">
  96.             添加子节点
  97.           </vxe-button>
  98.           <vxe-button size="small" @click="removeNode(scope.rowIndex, scope.row)">
  99.             删除节点
  100.           </vxe-button>
  101.           <vxe-button size="small" @click="showNodeData(scope.rowIndex, scope.row)">
  102.             查看详情
  103.           </vxe-button>
  104.         </template>
  106.       </vxe-table-column>
  109.     </vxe-table>
  110.   </div>
  111. </template>

JavaScript:

  2. import {TREE_DATA} from './data'
  3. import Sortable from 'sortablejs'
  4. import XEUtils from 'xe-utils'
  6. export default {
  7.   name: "TreeTable",
  9.   data() {
  10.     return {
  11.       tableData: TREE_DATA.data.root.children,
  12.       showHelpTip: false,
  13.       priorityList: [
  14.         {label: 'P0', value: '0'},
  15.         {label: 'P1', value: '1'},
  16.         {label: 'P2', value: '2'},
  17.         {label: 'P3', value: '3'}
  18.       ],
  19.     }
  20.   },
  21.   created() {
  22.     // 行拖动 https://xuliangzhan_admin.gitee.io/vxe-table/#/table/other/sortableRow
  23.     this.rowDrop()
  24.   },
  25.   beforeDestroy() {
  26.     if (this.sortable) {
  27.       this.sortable.destroy()
  28.     }
  29.   },
  31.   methods: {
  32.     reload() {
  33.       console.info('清除数据')
  34.       // 清除所有状态
  35.       this.$refs.xTree.clearAll();
  36.       return this.getNewRow();
  37.     },
  38.     // 自动保存
  39.     editClosedEvent({row, column}) {
  40.       const $table = this.$refs.xTree
  41.       const field = column.property
  42.       const arr = field.toString().split(".");
  43.       const cellValue = row.data[arr[1]]
  44.       // 判断单元格值是否被修改
  45.       if ($table.isUpdateByRow(row, field)) {
  46.         setTimeout(() => {
  47.           console.info(row);
  48.           this.$notify({
  49.             title: '保存成功',
  50.             message: `局部保存成功！ ${field}=${cellValue}`,
  51.             type: 'success'
  52.           })
  53.           // 局部更新单元格为已保存状态
  54.           $table.reloadRow(row, null, field)
  55.           console.info(row);
  56.         }, 300)
  57.       }
  58.     },
  60.     //移除节点
  61.     removeNode(index, row) {
  62.       // 删除可能需要后端帮忙， 前端告知删除的ID 后端遍历，然后返回最新数据
  63.       console.info(index, row);
  64.       this.tableData.splice(index, index);
  65.       // const $table = this.$refs.xTree
  66.       // $table.remove(row)
  67.       // console.info(this.tableData)
  68.     },
  70.     // 查看节点详情
  71.     showNodeData(index, row) {
  72.       console.info(row);
  73.     },
  75.     //获取所有的新增数据
  76.     getNewData() {
  77.       const insertRecords = this.tableData.filter(row => row.data._isNew)
  78.       console.info(insertRecords);
  79.     },
  82.     insertEvent(row) {
  83.       // 从最后新增
  84.       this.tableData.push(this.getNewRow())
  85.     },
  87.     // 添加子节点 https://codesandbox.io/s/vxe-table-charuzijiedianwentiyanshi-forked-3t0k4?file=/src/views/Demo1.vue:562-797
  88.     handleAddChildren(index, row) {
  89.       console.info("row", row)
  90.       if (!row.children) {
  91.         this.$set(row, "children", [this.getNewRow()]);
  92.       } else {
  93.         row.children.push(this.getNewRow());
  94.       }
  95.       this.tableData = [...this.tableData];
  97.     },
  99.     // 插入节点信息
  100.     getNewRow() {
  101.       // 通过_isNew 来判断是否是新增节点
  102.       return {
  103.         "data": {
  104.           "_isNew": true,
  105.           "createUser": "shijin.huang01@luckincoffee.com",
  106.           "createTime": new Date().getTime(),
  107.           "updateUser": "shijin.huang@luckincoffee.com",
  108.           "updateTime": new Date().getTime(),
  109.           "id": new Date().getTime(),
  110.           "text": "",
  111.           "note": "",
  112.           "progress": null,
  113.           "priority": null,
  114.           "hyberlinks": {
  115.             "link": "",
  116.             "title": ""
  117.           },
  118.           "testResult": null,
  119.           "auto": null,
  120.           "resource": null,
  121.           "leafNode": 0,
  122.           "presentationJson": "{\"created\":" + new Date().getTime() + ",\"expandState\":\"expand\"}",
  123.           "storyNo": "",
  124.           "latestTestResult": 0,
  125.           "latestReviewResult": 0,
  126.           "testCount": "0"
  127.         },
  128.         "children": []
  129.       }
  130.     },
  132.     // 获取插入的数据， 这个对数子节点不适用
  133.     getInsertEvent() {
  134.       const $table = this.$refs.xTree
  135.       const insertRecords = $table.getInsertRecords()
  136.       console.info(insertRecords.length)
  137.     },
  138.     // 获取删除的数据， 这个对树子节点不适用
  139.     getRemoveEvent() {
  140.       const $table = this.$refs.xTree
  141.       const removeRecords = $table.getRemoveRecords()
  142.       console.info(removeRecords.length)
  143.     },
  144.     // 获取更新的数据， 这个对树子节点不适用
  145.     getUpdateEvent() {
  146.       // 需要 表格设置加入 keep-source
  147.       const $table = this.$refs.xTree
  148.       const updateRecords = $table.getUpdateRecords()
  149.       console.info(updateRecords)
  150.       console.info(updateRecords.length)
  151.     },
  154.     // 拖拽 后保存怎么处理？
  155.     rowDrop() {
  156.       this.$nextTick(() => {
  157.         const xTable = this.$refs.xTree
  158.         this.sortable = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
  159.           handle: '.drag-btn',
  160.           onEnd: ({item, oldIndex}) => {
  161.             const options = {children: 'children'}
  162.             const targetTrElem = item
  163.             const wrapperElem = targetTrElem.parentNode
  164.             const prevTrElem = targetTrElem.previousElementSibling
  165.             const tableTreeData = this.tableData
  166.             const selfRow = xTable.getRowNode(targetTrElem).item
  167.             const selfNode = XEUtils.findTree(tableTreeData, row => row === selfRow, options)
  168.             if (prevTrElem) {
  169.               // 移动到节点
  170.               const prevRow = xTable.getRowNode(prevTrElem).item
  171.               const prevNode = XEUtils.findTree(tableTreeData, row => row === prevRow, options)
  172.               if (XEUtils.findTree(selfRow[options.children], row => prevRow === row, options)) {
  173.                 // 错误的移动
  174.                 const oldTrElem = wrapperElem.children[oldIndex]
  175.                 wrapperElem.insertBefore(targetTrElem, oldTrElem)
  176.                 return this.$notify({
  177.                   message: '不允许自己给自己拖动!',
  178.                   type: 'error',
  179.                   duration: 3000
  180.                 });
  181.               }
  182.               const currRow = selfNode.items.splice(selfNode.index, 1)[0]
  183.               if (xTable.isTreeExpandByRow(prevRow)) {
  184.                 // 移动到当前的子节点
  185.                 prevRow[options.children].splice(0, 0, currRow)
  186.               } else {
  187.                 // 移动到相邻节点
  188.                 prevNode.items.splice(prevNode.index + (selfNode.index < prevNode.index ? 0 : 1), 0, currRow)
  189.               }
  190.             } else {
  191.               // 移动到第一行
  192.               const currRow = selfNode.items.splice(selfNode.index, 1)[0]
  193.               tableTreeData.unshift(currRow)
  194.             }
  195.             // 如果变动了树层级，需要刷新数据
  196.             this.tableData = [...tableTreeData]
  197.             console.info(this.tableData)
  198.           }
  199.         })
  200.       })
  201.     }
  202.   }
  203. }

CSS；

  1. .sortable-row-demo .drag-btn {
  2.   cursor: move;
  3.   font-size: 12px;
  4. }
  6. .sortable-row-demo .vxe-body--row.sortable-ghost,
  7. .sortable-row-demo .vxe-body--row.sortable-chosen {
  8.   background-color: #dfecfb;
  9. }