首先安装一下依赖
npm i vue-table-with-tree-grid -S
引入
import Vue from 'vue'
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
Or
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
Vue.use(ZkTable)
使用
```java
<!-- 表格 -->
<tree-table
:data="cateList"
:columns="columns"
:selection-type="false"
:expand-type="false"
show-index
index-text="#"
border
>
<template v-slot:isok="scope">
<i
class="el-icon-success"
style="color: lightgreen"
v-if="scope.row.cat_deleted === false"
></i>
<i class="el-icon-error" style="color: red" v-else></i
></template>
</tree-table>
---------------------------------
<script>
export default {
columns: [
{
label: '分类名称',
prop: 'cat_name'
},
{
label: '是否有效',
// 表示将当前列定义为模板列
type: 'template',
// 表示当前这一列的模板名称
template: 'isok'
}
]
</script>