Vue电商后台——树形控件TreeTable——vue-table-with-tree-grid

1.应用场景：直接把图给大家放在这里了

2.接下来给大家说具体使用步骤：

（1）.第一步： 下载树形控件的依赖

npm i vue-table-with-tree-grid -S

 （2）.第二步：全局引入树形控件 || 或局部引入

⭕全局引入：在main.js中写入以下代码：

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

⭕局部引入：在页面中写入以下代码：

 3.然后就是使用了

代码放在这里了，看不到的话可以左右移动哦！

</template> 
<tree-table class="tb-cate" index-text="#" show-index stripe border :data="cateList" :columns="columns" :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>
        <template slot="level" scope="scope">
          <el-tag type="primary" effect="plain" size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" effect="plain" size="mini" v-else-if="scope.row.cat_level === 1">二级</el-tag>
          <el-tag type="warning" effect="plain" size="mini" v-else>三级</el-tag>
        </template>
        <template slot="opt">
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
      </tree-table>
    </el-card>
  </div>
</template>
<script>
import { getShopList } from "@/api/api";
export default {
  data() {
    return {
      cateList: [],
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          type: "template",
          template: "isok",
        },
        {
          label: "排序",
          type: "template",
          template: "level",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
    };
  },
  mounted() {
    getShopList(this.queryInfo).then((res) => {
      this.cateList = res.data.result;
      console.log(this.cateList);
    });
  },
  components: {},
};
</script>

4.然后是它的一些属性解释

table常用属性 

 columns 配置