1.0.0 • Published 5 years ago
dzh-tree-grid v1.0.0
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.
1.0.0
5 years ago