vue-table-with-tree-grid_树形表格组件_vue
目录
文章目录
内容
1、常用属性
- table
名称 | 类型 | 取值 | 默认值 | 描述 |
---|---|---|---|---|
data | Array | - | [] | 表格各行数据,层级数据 |
columns | Array | - | [] | 表格各列的配置(具体见下文:Columns Configs) |
show-index | Boolean | - | false | 是否显示数据索引 |
index-text | String | - | ‘序号’ | 数据索引名称 |
stripe | Boolean | - | false | 是否显示间隔斑马纹 |
border | Boolean | - | false | 是否显示纵向边框 |
is-fold | Boolean | - | true | 树形表格中父级是否默认折叠 |
- Columns configs
名称 | 类型 | 取值 | 默认值 | 描述 |
---|---|---|---|---|
label | String | - | ‘’ | 列标题名称 |
prop | String | - | ‘’ | 对应列内容的属性名 |
type | String | - | ‘’ | 列类型,可选值有 ‘template’(自定义列模板) |
template | String | - | ‘’ | 列类型为 ‘template’(自定义列模板) 时,对应的作用域插槽(它可以获取到 row, rowIndex, column, columnIndex)名称 |
2、应用场景
树形表格组件适应于具有层级关系的数据详细展示。本例需要展示部门详细信息,部门有上下级关系。
-
效果图示:
-
源代码:
//main.js import ZkTable from 'vue-table-with-tree-grid' Vue.use(ZkTable) // 可以自定义组件名 // 当前页面 <zk-table ref="ZKTableRef" index-text="#" :data="list" :columns="treeTable.columns" :stripe="treeTable.props.stripe" :border="treeTable.props.border" show-row-hover :show-index="treeTable.props.showIndex" is-fold :selection-type="treeTable.props.selectionType" :expand-type="treeTable.props.expandType" class="dept-content" > <template slot="level" slot-scope="{row}"> <el-tag :type="tagType[row.level-1]">{ {row.level}}级</el-tag> </template> <template slot="manipulate" slot-scope="{row}"> <el-row> <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(row)" ></el-button> <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(row.id)" ></el-button> </el-row> </template> </zk-table> ... // 树形表格对象 treeTable: { props: { stripe: true, border: true, showIndex: true, selectionType: false, expandType: false }, columns: [ { label: '部门名称', prop: 'name' }, { label: '负责人', prop: 'managerId' }, { label: '层级', type: 'template', template: 'level' }, { label: '操作', type: 'template', template: 'manipulate' } ] }, tagType: [ 'primary', 'warning', 'danger', 'info' ],
组件其他详细使用请参考官网:https://github.com/MisterTaki/vue-table-with-tree-grid
页面完整代码参考后续博客。
后记 :
本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785
后端JAVA源代码地址:https://gitee.com/gaogzhen/ihrm-parent // 后端项目
前端项目源代码地址:https://gitee.com/gaogzhen/ihrm-vue // 前端后台管理系统