vue-table-with-tree-grid是树形表格组件,下面是本人实际开发使用流程,话不多说,直接上教程

一、 下载依赖包

npm i vue-table-with-tree-grid -S 
或 
cnpm i vue-table-with-tree-grid -S

二、 全局引入

在main.js文件中引入

import treeTable from 'vue-table-with-tree-grid'
// 注册全局组件 上下的名字要对应
//Vue.component('treeTable'(这里可以自定义名字，名字是调用组件时使用的), treeTable(自己起的名字))
Vue.component('treeTable', treeTable)

三、 调用

/*分类表格
	:data(设置数据源) 
	:columns(设置表格中列配置信息) 
	:selection-type(是否有复选框)
	:expand-type(是否展开数据) 
	show-index(是否设置索引列) 
	index-text(设置索引列头)
	border(是否添加纵向边框) 
	:show-row-hover(是否鼠标悬停高亮) 
*/
 <tree-table
          :data="cateList"
          :columns="columns"
          :selection-type="false"
          :expand-type="false"
          show-index
          index-text="#"
          border
          :show-row-hover="false"
        >
          <!-- 是否有效 -->
          <template slot="isok" slot-scope="scope">
            <i
              v-if="scope.row.cat_deleted == false"
              class="el-icon-success cGreen"
            ></i>
            <i v-else class="el-icon-error cRed"></i>
          </template>
          <!-- 排序 -->
          <template slot="order" slot-scope="scope">
            <el-tag v-if="scope.row.cat_level == 0" type="warning">一级</el-tag>
            <el-tag v-else-if="scope.row.cat_level == 1" type="info"
              >二级</el-tag
            >
            <el-tag v-else type="primary">三级</el-tag>
          </template>
          <!-- 操作 -->
          <template slot="opt" slot-scope="scope">
            <div class="optbox">
              <el-button type="primary" size="mini" class="el-icon-edit"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" class="el-icon-delete" @click="delCate(scope.row.cat_id)"
                >删除</el-button
              >
            </div>
          </template>
        </tree-table>

四. data中的配置项

/*
	columns:[
		label: 表格标题
	]
*/
export default {
	data(){
		return{
			 cateList: [],// 这里是数据源 我是将接口的数据传进来的
			 columns: [ // tree-table 配置项
				        { label: '分类名称', prop: 'cat_name' },
				        // type:'template'(将该列设置为模板列)，template:'isok'(设置该列模板的名称为isok)
				        { label: '是否有效', prop: '', type: 'template', template: 'isok' },
				        { label: '排序', prop: '', type: 'template', template: 'order' },
				        { label: '操作', prop: '', type: 'template', template: 'opt' }
				      ]
		}
	}
}

五. 实际运行截图

以上就是使用树形表格的全过程,唯一要注意的就是数据结构要与后端返回的数据结构对应