DZHTreeGrid

一个基于ElementUI的树形表格插件

• 基于ElementUI
• 使用简洁方便
• 支持 Vue 2.0+

效果

安装

npm install dzh-tree-grid --save

或者

yarn add dzh-tree-grid --save

使用

注册组件

注册全局组件:

import DZHTreeGrid from 'dzh-tree-grid'

// 全局注册
Vue.component('dzh-tree-grid', DZHTreeGrid)

注册局部组件:

import DZHTreeGrid from 'dzh-tree-grid'

export default {
   	// 局部注册
  	components: { "dzh-tree-grid" : DZHTreeGrid }
}

例子

<template>
	<dzh-tree-grid
      :columns="columns"
      :loading="loading"
      :dataSource="categories"
    >
      <template slot-scope="scope">
        <el-button plain title='修改商品分类' type="primary" size="small" icon="el-icon-edit"></el-button>
        <el-button plain title='删除商品分类' type="danger" size="small" icon="el-icon-delete"></el-button>
      </template>
    </dzh-tree-grid>
</template>

<script>
import DZHTreeGrid from 'dzh-tree-grid'

export default {
  // 局部注册
  components: { 'dzh-tree-grid': DZHTreeGrid },
  data() {
    return {
      loading: true, // 是否正在加载表格数据
      columns: [// 需要展示的列
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '级别',
          prop: 'cat_level_name',
          width: 500 // 可选
        }
      ],
      categories:[// 需要展示的表格数据【数据结构要和下面的一致】
          {cat_id: 1, cat_name: "大家电", cat_level_name: "一级",children:[
              {cat_id: 3, cat_name: "电视",cat_pid: 1, cat_level_name: "二级",children:[
                  {cat_id: 6, cat_name: "曲面电视", cat_pid: 3, cat_level_name: "三级"}
              ]}
          ]},
          ......
      ]
    }
  }
}
</script>

自定义属性

| key | description | default | options | | :--------: | :----------------: | :-----: | :-----: | | columns | 要展示的列 | [] | Array | | loading | 是否正在加载 | true | Boolean | | dataSource | 表格需要展示的数据 | [] | Array |

注意事项

表格展示的数据，一定要和例子中 categories 的结构保持一致。

贡献

• 段子黄

感谢

• 暂无、期待有你

License

The plugin is open-sourced software licensed under the MIT license.