树结构表vue-table-with-tree-grid的使用

// 导入TreeTable

import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)

或者

import TreeTable from 'vue-table-with-tree-grid'
Vue.use(TreeTable)

使用

 <!-- 分类表格  -->
    <tree-table
      :data="datalist"
      :columns="columns"
      :selection-type="false"
      :expand-type="false"
      show-index
      index-text="#"
      border
      :show-row-hover="false"
    >
      <!-- 是否有效区域， 设置对应的模板列： slot="isok"(与columns中设置的template一致) -->
      <template slot="isok" slot-scope="scope">
        <i
          class="el-icon-success"
          v-if="scope.row.cat_deleted === false"
          style="color: lightgreen"
        ></i>
        <i class="el-icon-error" v-else style="color: red"></i>
      </template>

      <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1"
          >二级</el-tag
        >
        <el-tag size="mini" type="warning" v-else-if="scope.row.cat_level === 2"
          >三级</el-tag
        >
      </template>

      <template slot="opt" slot-scope="scope">
        <el-button size="mini" type="primary">操作</el-button>
        <el-button size="mini" type="danger">删除</el-button>
      </template>
    </tree-table>

//添加列表

<script>
export default {
  data() {
    return {
      //   treeTable
      columns: [
        { label: "分类名称", prop: "cat_name" },
        { label: "是否有效", prop: "", type: "template", template: "isok" },
        { label: "排序", prop: "", type: "template", template: "order" },
        { label: "操作", prop: "", type: "template", template: "opt" },
      ],
    };
  },
</script>