vue-table-with-tree-grid

基于vue+iview 实现treetable

（（（（ 新人光环 ））））

项目中刚刚遇到这种treetable的需求，于是在www.npmjs.com/找到了vue-table-with-tree-grid，上手简单

只为了安利，详细学习请戳链接： 原文链接、 原例子

一个简单的例子

效果图

.vue文件如下

<template hljs-string">"html">
    <zk-table 
        ref="table" 
        sum-text="sum"
        index-text="#" 
        :data="treeTableData.data" 
        :columns="columns" 
        :stripe="props.stripe" 
        :hljs-string">"props.border" 
        :show-header="props.showHeader" 
        :show-summary="props.showSummary"
        :show-row-hover="props.showRowHover"
        :show-index="props.showIndex"
        :tree-type="props.treeType" 
        :is-fold="props.isFold" 
        :expand-type="props.expandType"
        :selection-type="props.selectionType">
        <!-- 原文中 scope="scope" 会警告， 2.5版本后应为slot-scope="scope"-->
        <template slot="active" slot-scope="scope">
            <!--  ... ... (图中对应状态栏的绿点儿)-->
        </template>
        
        <template slot="empower" slot-scope="scope">
            <!-- ... ... (为授权的图标，可在这里添加点击事件)-->
        </template>
    </zk-table>
</template>
<script>
export default {
    name: 'example',
    //表格各行的数据
    data() {
      return {
        props: {
          stripe: false,//是否显示间隔斑马纹
          border: false,//是否显示纵向边框
          showHeader: true,//是否显示表头
          showSummary: false,//是否显示表尾合计行
          showRowHover: true,//鼠标悬停时，是否高亮当前行
          showIndex: false,//是否显示数据索引
          treeType: true,//是否为树形表格
          isFold: true,//树形表格中父级是否默认折叠
          expandType: false,//是否为展开行类型表格（为 True 时，需要添加作用域插槽, 它可以获取到 row, rowIndex)
          selectionType: false,//是否显示间隔斑马纹
        },
        data: [
          {
            name: '根组织',
            description: '111',
            owner:'admin',
            active: true,
            children: [
              {
                name: '大中华区',
                description: '',
                owner: '',
                active: true,
                children: [
                  {
                    name: '浙江省',
                    description: '',
                    owner: '',
                    active: true,
                    children: [
                      {
                        name: '杭州市',
                        description: '',
                        owner: '',
                        active: true
                      }
                    ]
                  }
                ]
              }
            ],
          },
          {
            name: 'Tom',
            sex: 'male',
            likes: ['football', 'basketball'],
            score: 20,
          },
        ],
        //表格标题数据
        columns: [
            {
                label: "用户组名",
                prop: "name"
            },
            {
                label: "描述",
                prop: "description",
                minWidth: "50px"
            },
            {
                label: "所有者",
                prop: "owner"
            },
            {
                label: "状态",
                prop: "active",
                type: "template",
                template: "active"
            },
            {
                label: "授权",
                type: "template",
                template: "empower"
            }
        ]
      };
    }
  };
</script>
复制代码
           

table 可配置的属性

属性	说明	类型	参数	默认值
data	表格各行的数据	Array	-	[]
empty-text	表格数据为空时显示的文字	String	-	'暂无数据'
columns	表格各列的配置	Array	-	[]
show-header	是否显示表头	Boolean	-	true
show-index	是否显示数据索引	Boolean	-	false
index-text	数据索引名称	String	-	'序号'
show-summary	是否显示表尾合计行	Boolean	-	false
sum-text	表尾合计行首列名称	String	-	'合计'
summary-method	表尾合计行计算方法	Function	data, column, columnIndex	-
max-height	最大高度	[String, Number]	-	'auto'
stripe	是否显示间隔斑马纹	Boolean	-	false
border	是否显示纵向边框	Boolean	-	'false'
show-row-hover	鼠标悬停时是否高亮当前行	Boolean	-	true
tree-type	是否为树形表格	Boolean	-	false
children-prop	树形表格中遍历的属性名称	String	-	children
is-fold	树形表格中父级是否默认折叠	Boolean	-	true
expand-type	是否为展开行类型表格（为 True 时，需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)	Boolean	-	false
selection-type	是否为多选类型表格	Boolean	-	false
row-key	行数据的 Key，用来优化 Table 的渲染	Function	row, rowIndex	rowIndex

Columns 可配置的属性

属性	说明	类型	默认值
label	列标题名称	String	''
prop	对应列内容的属性名	String	''
align	对应列内容的对齐方式，可选值有 'center', 'right'	String	'left'
headerAlign	对应列标题的对齐方式，可选值有 'center', 'right'	String	'left'
width	列宽度	[String, Number]	'auto'
minWidth	列最小宽度	[String, Number]	'80px'
type	列类型，可选值有 'template'(自定义列模板)	String	''
template	列类型为 'template'(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称	String	''

（... ...省略号，不行了，点原文链接查询所有api）

总结

在使用vue-table-with-tree-grid之前，我尝试iview自带的table展开来做这个功能

iview-table

table展开后判断树形数据中是否有children。

如果有，展开后还是一个 可展开的table。

若果没有，设置该数据_disableExpand，禁用展开

刚开始数据只有三个层级时，完全可以，但数据增加到7个时（具体多少个，没去研究）浏览器会报一个大概是无限循环的错。具体原因还没有去钻研。

项目紧急，在找到vue-table-with-tree-grid后，仅用不到半天的时间，便实现了。

带着感激之情安利开源。

长

.

.

.

.

.

.

.

.

. 出一口气