如何写用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.  

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

treegrid插件 当前选中的行: var config = { id: "tg1", width: "800", renderTo: "div1", headerAlign: "left", headerHeight: "30", dataAlign: "left", indentation: "20", folderOpenIcon: "images/folderOpen.gif", folderCloseIcon: "images/folderClose.gif", defaultLeafIcon: "images/defaultLeaf.gif", hoverRowBackground: "false", folderColumnIndex: "1", itemClick: "itemClickEvent", columns:[ {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"}, {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"}, {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"} ], data:[ {name: "城区分公司", code: "CQ", assignee: "", children:[ {name: "城区卡品分销中心"}, {name: "先锋服务厅", children:[ {name: "chlid1"}, {name: "chlid2"}, {name: "chlid3", children: [ {name: "chlid3-1"}, {name: "chlid3-2"}, {name: "chlid3-3"}, {name: "chlid3-4"} ]} ]}, {name: "半环服务厅"} ]}, {name: "清新分公司", code: "QX", assignee: "", children:[]}, {name: "英德分公司", code: "YD", assignee: "", children:[]}, {name: "佛冈分公司", code: "FG", assignee: "", children:[]} ] }; /* 单击数据行后触发该事件 id:行的id index:行的索引。 data:json格式的行数据对象。 */ function itemClickEvent(id, index, data){ window.location.href="ads"; } /* 通过指定的方法来自定义栏数据 */ function customCheckBox(row, col){ return ""; } function customOrgName(row, col){ var name = row[col.dataField] || ""; return name; } function customLook(row, col){ return "查看"; } //创建一个组件对象 var treeGrid = new TreeGrid(config); treeGrid.show(); /* 展开、关闭所有节点。 isOpen=Y表示展开,isOpen=N表示关闭 */ function expandAll(isOpen){ treeGrid.expandAll(isOpen); } /* 取得当前选中的行,方法返回TreeGridItem对象 */ function selectedItem(){ var treeGridItem = treeGrid.getSelectedItem(); if(treeGridItem!=null){ //获取数据行属性值 //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name); //获取父数据行 var parent = treeGridItem.getParent(); if(parent!=null){ //jQuery("#currentRow").val(parent.data.name); } //获取子数据行集 var children = treeGridItem.getChildren(); if(children!=null && children.length>0){ jQuery("#currentRow").val(children[0].data.name); } } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值