vue3.0树形表格插件vue-table-with-tree-grid（vue.2.0）替换 vxe-table（vue3.0）

由于看黑马，视频，那个vue-table-with-tree-grid在vue3 不能用，所以用这个替换下
vxe-table官网 https://vxetable.cn/#/table/start/install
查看 gitee https://gitee.com/xuliangzhan_admin/vxe-table
查github https://gitcode.net/mirrors/xuliangzhan/vxe-table?utm_source=csdn_github_accelerator

<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>
      <el-row>
        <el-col :span="2">
          <el-button type="primary" style="margin-bottom: 6px ">添加分类</el-button>
        </el-col>
      </el-row>


      <vxe-table
          resizable
          border
          ref="xTree"
          :tree-config="{children: 'children'}"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :checkbox-config="{labelField: 'id'}"
          :data="catelist">
        <!--          border
                  loading
                  row-id="id"
                  :data="catelist"
                  :tree-config="{ children: 'children', expandAll: true }"
              >-->
        <vxe-table-column
            type="seq"
            width="180"
            title="序号"
            tree-node
        ></vxe-table-column>
        <vxe-table-column field="cat_name" title="分类名称"></vxe-table-column>
        <vxe-table-column field="cat_deleted" title="是否有效">
          <template v-slot="scope">
            <el-icon v-if="scope.row.cat_deleted===true" style="color: lightgreen">
              <CircleCheck/>
            </el-icon>
            <el-icon v-else style="color: lightcoral">
              <CircleClose/>
            </el-icon>
          </template>
        </vxe-table-column>
        <vxe-table-column field="cat_level" title="排序">
          <template v-slot="scope">
            <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="warning">三级</el-tag>
          </template>
        </vxe-table-column>
        <vxe-table-column title="操作">
          <template v-slot="scope">
            <el-button type="primary" size="small" :icon="Edit">编辑</el-button>
            <el-button type="danger" size="small" :icon="Delete">删除</el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
          align="center"
          size="mini"
          background
          v-model:page-size="queryInfo.pageSize"
          v-model:current-page="queryInfo.pagenum"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"  @page-change="handlePageChange" >

      </vxe-pager>


    </el-card>
  </div>
</template>

<script>
import httpClient from "@/network/HttpClient";
import {Search, Edit, Delete, Setting} from "@element-plus/icons";
import {reactive} from "vue";

export default {

  name: "categories",
  data() {
    return {
      Search: Search,
      Edit: Edit,
      Delete: Delete,
      defaultProps: {
        children: 'children',
        label: 'cat_name',
      },
      //查询条件
      queryInfo:reactive( {
        type:3,
        pagenum:1,
        pagesize:10
      }),
      //商品分类列表，默认为空
      catelist: [],
      /* 总数数据条数*/
      total: 0,
      columns: []
    }
  },
  created() {
    this.getCateList();
  },

  methods: {
    //处理分页
    handlePageChange({ currentPage, pageSize }) {
      this.queryInfo.pagenum = currentPage;
      this.queryInfo.pagesize = pageSize;
      this.getCateList()//调用列表
    },
    //获取商品分类列表
    getCateList() {
      httpClient.getTwo("categories/", this.queryInfo).then(
          res => {
            if (res.meta.status != 200) {
              return this.$message.error("获取失败")
            } else {
              console.log(res);
              this.catelist = res.data.result;
              this.total = res.data.total;
            }
          }
      )
    },


  }
}
</script>

<style scoped>

</style>