学习笔记
npm i vue-table-with-tree-grid -S
2.引入
//注册全局树状表格
import tree from 'vue-table-with-tree-grid'
Vue.component('tree', tree)
3.在页面中使用
<tree></tree>
4.小案例 （属性方法参考百度）
<tree
ref="table"
sum-text="sum"
index-text="#"
:data="data"
:columns="columns"
:show-summary="props.showSummary"
:show-row-hover="props.showRowHover"
:show-index="true"
:tree-type="props.treeType"
:is-fold="props.isFold"
:expand-type="props.expandType"
:selection-type="props.selectionType"
>
<template slot="sex" scope="sex">
<el-tag v-if="sex.row.cat_level == 0"> 一级</el-tag>
<el-tag v-if="sex.row.cat_level == 1" type="success"> 二级</el-tag>
<el-tag v-if="sex.row.cat_level == 2" type="warning"> 三级</el-tag>
</template>
<template slot="likes" scope="scope">
<el-row>
<!-- //编辑 -->
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
@click="bj(scope.row.cat_id)"
>
编辑
</el-button>
<!-- 删除 -->
<el-button
type="warning"
icon="el-icon-edit"
size="mini"
@click="remove(scope.row.cat_id)"
>
删除
</el-button>
<!-- 权限分配 -->
<!-- <el-button type="success" icon="el-icon-edit" size="mini">
权限分配
</el-button> -->
</el-row>
</template>
<template slot="score" scope="scope">
<el-tag v-if="scope.row.cat_level == 0"> 一级</el-tag>
<el-tag v-if="scope.row.cat_level == 1" type="success"> 二级</el-tag>
<el-tag v-if="scope.row.cat_level == 2" type="warning"> 三级</el-tag>
</template>
</tree>
