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>