1.下载插件
1.1可以通过vue ui在项目管理器中下载项目,具体流程如下:
点击查看详情可以查看这个插件的相关使用以及demo
链接:https://github.com/MisterTaki/vue-table-with-tree-grid
2.使用插件
根据官方的介绍,聚义有两种使用方式,这里采用的第二种
2.1 引入:
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
3.在页面中使用
- 经过以上步骤便可以全局使用tree-tabke插件了,举例如下
3.1 结构:
<el-card class="box-card">
<el-row>
<el-button type="primary">添加分类 </el-button>
</el-row>
<el-row>
<tree-table
:data="goodsList"
:columns="columns"
:show-index="true"
border
index-text="#"
:expand-type="false"
:selection-type="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: red"></i>
</template>
</tree-table>
</el-row>
</el-card>
3.2 逻辑
<script>
export default {
data() {
return {
//请求参数
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5,
},
//商品分类数据
goodsList: [],
//返回的商品总数
total: 0,
//tree-table中用到的索引列定义的相关数据
columns: [
{
label: "分类名称",
prop: "cat_name",
},
{
label: "是否有效",
//开启模板
type: "template",
//模板插槽定义名称
template: "isOk",
},
],
}
},
methods: {
//获取商品分类数据
async getGoodsCate() {
const { data: res } = await this.$http.get("categories", {
params: this.queryInfo,
})
if (res.meta.status !== 200) {
this.$message.error("获取参数失败")
}
this.total = res.data.total
this.goodsList = res.data.result
console.log(this.goodsList)
},
},
}
</script>
3.3 为了能够更清晰的看,一下贴上整体结构
<template>
<div>
<!-- 面包屑 -->
<el-breadcrumb>
<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 class="box-card">
<el-row>
<el-button type="primary">添加分类 </el-button>
</el-row>
<el-row>
<tree-table
:data="goodsList"
:columns="columns"
:show-index="true"
border
index-text="#"
:expand-type="false"
:selection-type="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: red"></i>
</template>
</tree-table>
</el-row>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
//请求参数
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5,
},
goodsList: [],
total: 0,
columns: [
{
label: "分类名称",
prop: "cat_name",
},
{
label: "是否有效",
//开启模板
type: "template",
//模板插槽定义名称
template: "isOk",
},
],
}
},
methods: {
//获取商品分类数据
async getGoodsCate() {
const { data: res } = await this.$http.get("categories", {
params: this.queryInfo,
})
if (res.meta.status !== 200) {
this.$message.error("获取参数失败")
}
this.total = res.data.total
this.goodsList = res.data.result
console.log(this.goodsList)
},
},
created() {
this.getGoodsCate()
},
mounted() {},
}
</script>
<style lang="less" scoped>
.el-card {
margin-top: 20px;
}
.el-row {
margin: 10px 0;
}
</style>
3.3 属性说明
- tree-table的属性有很多,这里就就者我在项目中使用到的属性进行说明,具体详见文档
template:列类型为 'template'(自定义列模板) 时,对应的插槽 — Vue.js它可以获取到 row, rowIndex, column, columnIndex)名称
4.效果图