vue-table-with-tree-grid_树形表格组件_vue

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    // 前端后台管理系统