第三方UI vue-table-width-tree-grid的使用

这是一个第三方UI包 如果想看具体细节的话可以去作者的github细看

1. 在Vue cli中导入vue-table-width-tree-grid的依赖包
2. 在入口文件main.js中导入相应的包

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

3. 在组件中添加tree-table标签

<tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false"
                :expand-type="false" :show-index="true" index-text="#" border :show-row-hover="false">
                <!-- 是否有效 -->
                <template v-slot:isok="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 v-slot:level="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 v-slot:opt="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="warning" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </tree-table>

4. catelist,columns的数据细节

catelist: [],//这是用于获取后台数据的数组
columns: [{
                    label: "分类名称",
                    prop: "cat_name",

                }, {
                    label: "是否有效",
                    type: "template",
                    template: "isok"
                }, {
                    label: "排序",
                    type: "template",
                    template: "level"
                }, {
                    label: "操作",
                    type: "template",
                    template: "opt",
                }
                ],
                
//后台数据的获取
async getCateList() {
                const { data: res } = await this.$http.get("categories", { params: this.queryInfo });
                if (res.meta.status !== 200) {
                    this.$message.error("获取数据失败");
                }
                this.catelist = res.data.result;
                this.total = res.data.total;
                console.log(this.catelist)
            },