如何写用VUE写TREEGRID

转载自：https://blog.csdn.net/s8460049/article/details/61414751

该组件基于技术栈，主要涉及vue-cli生成的webpack项目脚手架，在此脚手架项目基础上完成的，整合了element-ui开源vue的UI项目

1.vue-cli的安装使用

npm install -g vue-cli

全局安装vue-cli之后，使用该脚手架的相关命令，可快速生成一个比较规范的vue项目结构

 

vue init <template-name> <project-name>

 

例子

vue init webpack treeTable

这样一个快速的项目结构生成，如下所示，中间一路回车就可以了，主要是设置了是否支持eslint等等

 

 

 

2.整合element-ui

 

cd treeTable

进入刚刚生成的项目目录中，

安装element-ui

npm i element-ui -S

在main.js中，

1. import ElementUI from 'element-ui'

2. import 'element-ui/lib/theme-default/index.css'

3.  

4. Vue.use(ElementUI)

 

整合就可以了，具体element-ui更多的使用和操作，可以去官网查看 http://element.eleme.io/#/zh-CN/component/quickstart

 

我这里主要是利用他的table组件来制作一个树形结构的table。

 

3.树形table组件制作

在src目录的components目录中，

 

 

其中utils下面提供一些需要用的工具类

vue目录下面是组件的源码

index.js是外包入口

 

相关代码

dataTranslate.js主要是提供了把数组数据转换成树形结构的数据，并且进行相关属性的添加

1. /*

2. * @Author: sunlandong

3. * @Date:   2017-03-11 12:06:49

4. * @Last Modified by:   sunlandong

5. * @Last Modified time: 2017-03-11 16:30:03

6. */

7.  
8.  

9. import Vue from 'vue'

10. function DataTransfer (data) {

11.   if (!(this instanceof DataTransfer)) {

12.     return new DataTransfer(data, null, null)

13.   }

14. }

15.  
16.  

17. DataTransfer.treeToArray = function (data, parent, level, expandedAll) {

18.   let tmp = []

19.   Array.from(data).forEach(function (record) {

20.     if (record._expanded === undefined) {

21.       Vue.set(record, '_expanded', expandedAll)

22.     }

23.     if (parent) {

24.       Vue.set(record, '_parent', parent)

25.     }

26.     let _level = 0

27.     if (level !== undefined && level !== null) {

28.       _level = level + 1

29.     }

30.     Vue.set(record, '_level', _level)

31.     tmp.push(record)

32.     if (record.children && record.children.length > 0) {

33.       let children = DataTransfer.treeToArray(record.children, record, _level, expandedAll)

34.       tmp = tmp.concat(children)

35.     }

36.   })

37.   return tmp

38. }

39.  
40.  

41. export default DataTransfer

utils/index.js

 

1. /*

2. * @Author: sunlandong

3. * @Date:   2017-03-11 12:06:55

4. * @Last Modified by:   sunlandong

5. * @Last Modified time: 2017-03-11 16:36:56

6. */

7. import MSDataTransfer from './dataTranslate.js'

8. export default {

9. MSDataTransfer

10. }

TreeGrid.vue是树形table组件的源码

[html] view plain copy

1. <code class="language-html"><template>  
2.   <el-table  
3.     :data="data"  
4.     border  
5.     style="width: 100%"  
6.     :row-style="showTr">  
7.     <el-table-column v-for="(column, index) in columns" :key="column.dataIndex"  
8.       :label="column.text">  
9.       <template scope="scope">  
10.         <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>  
11.         <button class="button is-outlined is-primary is-small" v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">  
12.           <i v-if="!scope.row._expanded" class="el-icon-caret-right" aria-hidden="true"></i>  
13.           <i v-if="scope.row._expanded" class="el-icon-caret-bottom" aria-hidden="true"></i>  
14.         </button>  
15.         <span v-else-if="index===0" class="ms-tree-space"></span>  
16.         {{scope.row[column.dataIndex]}}  
17.       </template>  
18.     </el-table-column>  
19.     <el-table-column label="操作" v-if="treeType === 'normal'" width="260">  
20.       <template scope="scope">  
21.         <button type="button" class="el-button el-button--default el-button--small">  
22.           <router-link  
23.             :to="{ path: requestUrl + 'edit', query: {id: scope.row.Oid} }"  
24.             tag="span">  
25.             编辑  
26.           </router-link>  
27.         </button>  
28.         <el-button  
29.           size="small"  
30.           type="danger"  
31.           @click="handleDelete()">  
32.           删除  
33.         </el-button>  
34.         <button type="button" class="el-button el-button--success el-button--small">  
35.           <router-link :to="{ path: requestUrl, query: {parentId: scope.row.parentOId} }"  
36.                        tag="span">  
37.             添加下级树结构  
38.           </router-link>  
39.         </button>  
40.       </template>  
41.     </el-table-column>  
42.   </el-table>  
43. </template>  
44. <script>  
45.   import Utils from '../utils/index.js'  
46. //  import Vue from 'vue'  
47.   export default {  
48.     name: 'tree-grid',  
49.     props: {  
50. // 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化  
51.       treeStructure: {  
52.         type: Boolean,  
53.         default: function () {  
54.           return false  
55.         }  
56.       },  
57. // 这是相应的字段展示  
58.       columns: {  
59.         type: Array,  
60.         default: function () {  
61.           return []  
62.         }  
63.       },  
64. // 这是数据源  
65.       dataSource: {  
66.         type: Array,  
67.         default: function () {  
68.           return []  
69.         }  
70.       },  
71. // 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来  
72.       requestUrl: {  
73.         type: String,  
74.         default: function () {  
75.           return ''  
76.         }  
77.       },  
78. // 这个是是否展示操作列  
79.       treeType: {  
80.         type: String,  
81.         default: function () {  
82.           return 'normal'  
83.         }  
84.       },  
85. // 是否默认展开所有树  
86.       defaultExpandAll: {  
87.         type: Boolean,  
88.         default: function () {  
89.           return false  
90.         }  
91.       }  
92.     },  
93.     data () {  
94.       return {}  
95.     },  
96.     computed: {  
97.     // 格式化数据源  
98.       data: function () {  
99.         let me = this  
100.         if (me.treeStructure) {  
101.           let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll)  
102.           console.log(data)  
103.           return data  
104.         }  
105.         return me.dataSource  
106.       }  
107.     },  
108.     methods: {  
109.     // 显示行  
110.       showTr: function (row, index) {  
111.         let show = (row._parent ? (row._parent._expanded && row._parent._show) : true)  
112.         row._show = show  
113.         return show ? '' : 'display:none;'  
114.       },  
115.     // 展开下级  
116.       toggle: function (trIndex) {  
117.         let me = this  
118.         let record = me.data[trIndex]  
119.         record._expanded = !record._expanded  
120.       },  
121.     // 显示层级关系的空格和图标  
122.       spaceIconShow (index) {  
123.         let me = this  
124.         if (me.treeStructure && index === 0) {  
125.           return true  
126.         }  
127.         return false  
128.       },  
129.     // 点击展开和关闭的时候，图标的切换  
130.       toggleIconShow (index, record) {  
131.         let me = this  
132.         if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {  
133.           return true  
134.         }  
135.         return false  
136.       },  
137.       handleDelete () {  
138.         this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {  
139.           confirmButtonText: '确定',  
140.           cancelButtonText: '取消',  
141.           type: 'error'  
142.         }).then(() => {  
143.           this.$message({  
144.             type: 'success',  
145.             message: '删除成功!'  
146.           })  
147.         }).catch(() => {  
148.           this.$message({  
149.             type: 'info',  
150.             message: '已取消删除'  
151.           })  
152.         })  
153.       }  
154.     }  
155.   }  
156. </script>  
157. <style scoped>  
158.   .ms-tree-space{position: relative;  
159.     top: 1px;  
160.     display: inline-block;  
161.     font-family: 'Glyphicons Halflings';  
162.     font-style: normal;  
163.     font-weight: 400;  
164.     line-height: 1;  
165.     width: 18px;  
166.     height: 14px;}  
167.   .ms-tree-space::before{content: ""}  
168.   table td{  
169.     line-height: 26px;  
170.   }  
171. </style></code>  

index.js

1. import TreeGrid from './vue/TreeGrid.vue'

2.  

3. module.exports = {

4. TreeGrid

5. }

使用

1. <template>

2. <div class="hello">

3. <tree-grid :columns="columns" :tree-structure="true" :data-source="dataSource"></tree-grid>

4. </div>

5. </template>

6.  

7. <script>

8. import {TreeGrid} from './treeTable'

9. export default {

10. name: 'hello',

11. data () {

12. return {

13. columns: [

14. {

15. text: '姓名',

16. dataIndex: 'name'

17. },

18. {

19. text: '年龄',

20. dataIndex: 'age'

21. },

22. {

23. text: '性别',

24. dataIndex: 'sex'

25. }

26. ],

27. dataSource: [

28. {

29. id: 1,

30. parentId: 0,

31. name: '测试1',

32. age: 18,

33. sex: '男',

34. children: [

35. {

36. id: 2,

37. parentId: 1,

38. name: '测试2',

39. age: 22,

40. sex: '男'

41. }

42. ]

43. },

44. {

45. id: 3,

46. parentId: 0,

47. name: '测试3',

48. age: 23,

49. sex: '女',

50. children: [

51. {

52. id: 4,

53. parentId: 3,

54. name: '测试4',

55. age: 22,

56. sex: '男'

57. },

58. {

59. id: 5,

60. parentId: 3,

61. name: '测试5',

62. age: 25,

63. sex: '男'

64. },

65. {

66. id: 6,

67. parentId: 3,

68. name: '测试6',

69. age: 26,

70. sex: '女',

71. children: [

72. {

73. id: 7,

74. parentId: 6,

75. name: '测试7',

76. age: 27,

77. sex: '男'

78. }

79. ]

80. }

81. ]

82. },

83. {

84. id: 18,

85. parentId: 0,

86. name: '测试8',

87. age: 18,

88. sex: '男'

89. }

90. ]

91. }

92. },

93. components: {

94. TreeGrid

95. }

96. }

97. </script>

98.  

99. <!-- Add "scoped" attribute to limit CSS to this component only -->

100. <style scoped>

101. </style>

102. 在TreeGrid里面需要修改一下.要不然会出现expand的bug

103. 

105.  

106. 个人吧button样式改成了span这样更好看一些