1.安装依赖
npm i vue-table-with-tree-grid
2.在main.js中使用
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
3.在组件中使用
<!--
* @Author: your name
* @Date: 2020-06-24 20:04:19
* @LastEditTime: 2020-06-29 06:35:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \vue_shop\src\components\goods\Cate.vue
-->
<style lang="less" scoped>
.Cate {
.treeTable{
margin-top: 15px;
}
}
</style>
<template>
<div class="Cate">
<!-- 面包屑导航 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片视图区域 -->
<el-card>
<el-row>
<el-col>
<el-button type="primary">添加分类</el-button>
</el-col>
</el-row>
<!-- 表格区域 -->
<tree-table
class="treeTable"
:data="catelist"
:columns="columns"
:selection-type="false"
:expand-type="false"
show-index
index-text="#"
border
:show-row-hover="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: lightgreen"></i>
</template>
<!-- 排序 -->
<template slot="order" slot-scope="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>三级</el-tag>
</template>
<!-- 操作 -->
<template slot="opt" slot-scope="scope">
<el-button size="mini" type="primary" icon="el-icon-edit">{{ scope.row }}编辑</el-button>
<el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
</template>
</tree-table>
<!-- 分页区域 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[3, 5, 10, 15]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</el-card>
</div>
</template>
<script>
export default {
name: 'Cate',
mixins: [],
components: {},
props: {},
data() {
return {
// 查询条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5
},
// 商品分类的数据列表,默认为空
catelist: [],
// 总数据条数
total: 0,
// 为table指定列的定义
columns: [
{
label: '分类名称',
prop: 'cat_name'
},
{
label: '是否有效',
// 将当前列定义为模板列
type: 'template',
// 表示当前这一列使用的模板名称
template: 'isok'
},
{
label: '排序',
// 将当前列定义为模板列
type: 'template',
// 表示当前这一列使用的模板名称
template: 'order'
},
{
label: '操作',
// 将当前列定义为模板列
type: 'template',
// 表示当前这一列使用的模板名称
template: 'opt'
}
]
}
},
watch: {},
computed: {},
methods: {
// 获取商品分类数据
async getCateList() {
const { data: res } = await this.$http.get('categories', {
params: this.queryInfo
})
if (res.meta.status !== 200) {
return this.$message.error('获取商品分类失败!')
}
// 把数据列表赋值给catelist
this.catelist = res.data.result
// 为总数据条数赋值
this.total = res.data.total
},
// 监听pagesize改变的事件
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.getCateList()
},
// 监听pagenum改变
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage
this.getCateList()
}
},
created() {
this.getCateList()
},
mounted() {}
}
</script>