1.安装
npm i vue-table-with-tree-grid -S
2.在main.js进行引入注册
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
Vue.component(‘tree-table’, ZkTable)
3.在组件中引入
<!-- 表格展示列表区 -->
<tree-table
index-text="#"
:data="goodsCategories"
show-index
stripe
border
:columns="columns"
:expand-type="false"
:selection-type="false"
style="margin-top:15px;"
>
<!-- 是否有效 -->
<template slot="isOk" slot-scope="scope">
<i v-if="scope.row.cat_deleted === false" class="el-icon-success"></i>
<i v-else class="el-icon-error"></i>
</template>
<!-- 排序 -->
<template slot-scope="scope" slot="sort">
<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="info">三级</el-tag>
</template>
<!-- 操作 -->
<template slot="do">
<el-button type="primary" size="mini" icon="el-icon-edit"
>编辑</el-button
><el-button type="danger" size="mini" icon="el-icon-delete"
>删除</el-button
>
</template>
</tree-table>
在data中定义
columns: [
{
label: '分类名称',
prop: 'cat_name',
width: '400px'
},
{
label: '是否有效',
type: 'template',
template: 'isOk'
},
{
label: '排序',
type: 'template',
template: 'sort'
},
{
label: '操作',
type: 'template',
template: 'do'
}
],
API