vue引入vue-table-with-tree-grid使用

在做项目过程中需要用的嵌套的表格就想到到了黑马之前用的，站在别人肩膀上可以少走很多歪路。
1.安装
不足开发依赖和运行依赖区别
2.vuecli3
main.js

import TreeTable from 'vue-table-with-tree-grid'
// 组件全局注册 表格树
Vue.component('tree-table', TreeTable)

 <!-- 表格 -->
      <tree-table
        border
        :data="menuTreeData" //数据
        :columns="columns"  //列表内容
        show-header
        :show-index="true" //索引
        :stripe="true"//样式
        show-row-hover
        :expand-type="false" 
        :is-fold="false" //子节点是否折叠
      >
        <!-- 操作 -->
        <template slot="opt" slot-scope="scope">
          <!-- {{scope.row.menuId}} -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="onResource(scope.row.menuId)"
            >附件</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            @click="onTextResource(scope.row.menuId)"
            >介绍</el-button
          >
          <el-button
            type="info"
            icon="el-icon-edit"
            size="mini"
            @click="onEditDialog(scope.row)"
            >编辑</el-button
          >
         
        </template>
        <!-- 操作状态 -->
        <template slot="operStatus" slot-scope="scope">
          <!-- {{scope.row.operStatus}} -->
          <!-- <el-switch v-if="scope.row.operStatus"  active-color="green" inactive-color="red"></el-switch> -->
     
           <div class="success" v-if="scope.row.operStatus===1">开</div>
           <div class="error" v-else>关</div>
        </template>
        <!-- 展示状态 -->
        <template slot="showStatus" slot-scope="scope">
        
          <div class="success" v-if="scope.row.showStatus===1">开</div>
           <div class="error" v-else>关</div>
        </template>
      </tree-table>

   columns: [
        {
          label: "层级",
          prop: "cc",
        },
        {
          label: "名称",
          prop: "name",
        },
        {
          label: "图标",
          prop: "icon",
        },
        {
          label: "地图编号",
          prop: "mapNumber",
        },
        {
          label: "操作状态",
          type: "template",
          template: "operStatus",
        },
        {
          label: "展示状态",
          //  prop: 'showStatus'
          type: "template",
          template: "showStatus",
        },
        //  {
        //  label: '父编号',
        //  prop: 'parentId'
        // },
        {
          label: "操作",
          width: "400px",
          type: "template",
          template: "opt",
        },
      ],