table

table

前言

公司想搞个表格树的展示页面，看着element有个表格树，还以为可以用。

用出来只用表格没有树，研究半天没研究个所以然，只能从新找个

npm里找到一个：vue-table-with-tree-grid

正文

element的坑

element：

然后一模一样的代码用在项目中，标点符合都没改：

emmmmmmmm。。。。最前面的箭头不见了。。。换了好几个系统试了一下。居然都没有。。

毫不犹豫投入了vue-table-with-tree-grid的怀抱

vue-table-with-tree-grid

npm中它的地址：

安装

npm i vue-table-with-tree-grid -S
Or use yarn:yarn add vue-table-with-tree-grid

导入

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'Vue.use(ZkTable)
Orimport Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'Vueponent(ZkTable.name, ZkTable)

示例：

.vue

DOM

<zk-tableref="table":data="data":columns="columns":stripe="props.stripe":border="props.border":show-header="props.showHeader":show-summary="props.showSummary":show-row-hover="props.showRowHover":show-index="props.showIndex":tree-type="Type":is-fold="props.isFold":expand-type="pandType":selection-type="props.selectionType"sum-text="sum"index-text="#"/>

数据

props: {stripe: false,border: false,showHeader: true,showSummary: false,showRowHover: true,showIndex: false,treeType: true,isFold: true,expandType: false,selectionType: false},data: [{name: 'Jack',sex: 'male',likes: ['football', 'basketball'],score: 10,children: [{name: 'Ashley',sex: 'female',likes: ['