vue中使用vue-table-with-tree-grid实现商品的分类显示（table-tree）

1.下载插件

1.1可以通过vue ui在项目管理器中下载项目，具体流程如下：

点击查看详情可以查看这个插件的相关使用以及demo

链接：https://github.com/MisterTaki/vue-table-with-tree-grid

 2.使用插件

根据官方的介绍，聚义有两种使用方式，这里采用的第二种

2.1 引入：

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

 

 3.在页面中使用

• 经过以上步骤便可以全局使用tree-tabke插件了，举例如下

3.1 结构：

 <el-card class="box-card">
      <el-row>
        <el-button type="primary">添加分类 </el-button>
      </el-row>

      <el-row>
        <tree-table
          :data="goodsList"
          :columns="columns"
          :show-index="true"
          border
          index-text="#"
          :expand-type="false"
          :selection-type="false"
        >
          <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>
        </tree-table>
      </el-row>
    </el-card>

3.2 逻辑

<script>
  export default {
    data() {
      return {
        //请求参数
        queryInfo: {
          type: 3,
          pagenum: 1,
          pagesize: 5,
        },
        //商品分类数据
        goodsList: [],
        //返回的商品总数
        total: 0,
        //tree-table中用到的索引列定义的相关数据
        columns: [
          {
            label: "分类名称",
            prop: "cat_name",
          },
          {
            label: "是否有效",
            //开启模板
            type: "template",
            //模板插槽定义名称
            template: "isOk",
          },
        ],
      }
    },
    methods: {
      //获取商品分类数据
      async getGoodsCate() {
        const { data: res } = await this.$http.get("categories", {
          params: this.queryInfo,
        })
        if (res.meta.status !== 200) {
          this.$message.error("获取参数失败")
        }
        this.total = res.data.total
        this.goodsList = res.data.result
        console.log(this.goodsList)
      },
    },
}

</script>

3.3 为了能够更清晰的看，一下贴上整体结构

<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb>
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片取 -->
    <el-card class="box-card">
      <el-row>
        <el-button type="primary">添加分类 </el-button>
      </el-row>

      <el-row>
        <tree-table
          :data="goodsList"
          :columns="columns"
          :show-index="true"
          border
          index-text="#"
          :expand-type="false"
          :selection-type="false"
        >
          <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>
        </tree-table>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //请求参数
        queryInfo: {
          type: 3,
          pagenum: 1,
          pagesize: 5,
        },
        goodsList: [],
        total: 0,
        columns: [
          {
            label: "分类名称",
            prop: "cat_name",
          },
          {
            label: "是否有效",
            //开启模板
            type: "template",
            //模板插槽定义名称
            template: "isOk",
          },
        ],
      }
    },
    methods: {
      //获取商品分类数据
      async getGoodsCate() {
        const { data: res } = await this.$http.get("categories", {
          params: this.queryInfo,
        })
        if (res.meta.status !== 200) {
          this.$message.error("获取参数失败")
        }
        this.total = res.data.total
        this.goodsList = res.data.result
        console.log(this.goodsList)
      },
    },
    created() {
      this.getGoodsCate()
    },
    mounted() {},
  }
</script>

<style lang="less" scoped>
  .el-card {
    margin-top: 20px;
  }
  .el-row {
    margin: 10px 0;
  }
</style>

3.3 属性说明

• tree-table的属性有很多，这里就就者我在项目中使用到的属性进行说明，具体详见文档

 template：列类型为 'template'(自定义列模板) 时，对应的插槽 — Vue.js它可以获取到 row, rowIndex, column, columnIndex）名称

4.效果图