vue-table-with-tree-grid的使用

vue-table-with-tree-grid的使用

// 1. 引入vue-table-with-tree-grid
import ZkTable from 'vue-table-with-tree-grid'
Vue.component(ZkTable.name, ZkTable)


// 2. 在在组件中写入
<zk-table
        :data="tableData"
        show-index
        index-text="#"
        border
        :columns="columns"
        children-prop="children"
        :show-row-hover="false"
        :selection-type="false"
        :expand-type="false"
      >
        
      </zk-table>

// 3. 在data中配置columnsw 把内容渲染出来
columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
        //表格名称
          label: "是否有效",
          //本列表格数据
          prop: "cat_deleted",
          //定义插槽
          type: "template",
          //插槽名
          template: "scoped",
        },
        {
          label: "排序",
          prop: "cat_level",
          type: "template",
          template: "spoe",
        },
        {
          label: "操作",
          type: "template",
          template: "solt",
        },
      ],


// 4. 在zk-table中写入

<template slot="scoped" scope="scope">
          <i
            class="el-icon-success"
            style="color: green; width: 20px; height: 20px"
            v-if="scope.row.cat_deleted == true"
          ></i>
          <i
            class="el-icon-error"
            style="color: red; width: 20px; height: 20px"
            v-if="scope.row.cat_deleted == false"
          ></i>
        </template>
        <template slot="spoe" scope="scope">
          <el-tag :type="types[scope.row.cat_level]">{{
            (scope.row.cat_level + "") | dengji
          }}</el-tag>
        </template>
        <template slot="solt" scope="scope">
          <div class="scodv">
            <el-button type="primary" class="el-but" @click="compild(scope.row)"
              ><i class="el-icon-edit">编辑</i></el-button
            >
            <el-button type="danger" class="el-but" @click="remove(scope.row)"
              ><i class="el-icon-delete">删除</i></el-button
            >
          </div>
        </template>

在data中定义

      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "likes",
        },
        {
          label: "排序",
          prop: "cat_level",
          type: "template",
          template: "isrt",
        },
        {
          label: "操作",
          type: "template",
          template: "isort",
        },
      ],