vue使用vue-table-with-tree-grid树形表格插件

1.安装

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

2.在main.js进行引入注册

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.component(‘tree-table’, ZkTable)

3.在组件中引入

   <!-- 表格展示列表区 -->
      <tree-table
        index-text="#"
        :data="goodsCategories"
        show-index
        stripe
        border
        :columns="columns"
        :expand-type="false"
        :selection-type="false"
        style="margin-top:15px;"
      >
        <!-- 是否有效 -->
        <template slot="isOk" slot-scope="scope">
          <i v-if="scope.row.cat_deleted === false" class="el-icon-success"></i>
          <i v-else class="el-icon-error"></i>
        </template>

        <!-- 排序 -->
        <template slot-scope="scope" slot="sort">
          <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level === 1" type="success"
            >二级</el-tag
          >
          <el-tag v-else type="info">三级</el-tag>
        </template>

        <!-- 操作 -->
        <template slot="do">
          <el-button type="primary" size="mini" icon="el-icon-edit"
            >编辑</el-button
          ><el-button type="danger" size="mini" icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </tree-table>

在data中定义

   columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
          width: '400px'
        },
        {
          label: '是否有效',
          type: 'template',
          template: 'isOk'
        },
        {
          label: '排序',
          type: 'template',
          template: 'sort'
        },
        {
          label: '操作',
          type: 'template',
          template: 'do'
        }
      ],

API