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