vue-table-with-tree-grid

下载：

Use npm:

1	npm i vue-table-with-tree-grid -S

Or use yarn:

1	yarn add vue-table-with-tree-grid

Usage

1
2
3
4

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.use(ZkTable)

1
2
3
4

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.component(ZkTable.name, ZkTable)

举个栗子~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<template>
<div>
<el-card>
<el-button type="primary">添加分类</el-button>
<zk-table
style="margin:10px 0;"
ref="table"
sum-text="sum"
index-text="#"
:data="cataList"
:columns="columns"
:stripe="props.stripe"
:border="props.border"
:show-header="props.showHeader"
:show-summary="props.showSummary"
:show-row-hover="props.showRowHover"
:show-index="props.showIndex"
:tree-type="props.treeType"
:is-fold="props.isFold"
:expand-type="props.expandType"
:selection-type="props.selectionType">

<template slot="active" slot-scope="scope">

<el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
</template>
</zk-table>
<el-pagination
style="text-align: center"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryInfo.pagenum"
:page-sizes="[1, 2, 3, 5]"
:page-size="queryInfo.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-card>
</div>
</template>

<script>
export default {
name: "categories",
data(){
return{
props: {
stripe: true,//是否显示间隔斑马纹
border: true,//是否显示纵向边框
showHeader: true,//是否显示表头
showSummary: false,//是否显示表尾合计行
showRowHover: true,//鼠标悬停时，是否高亮当前行
showIndex: false,//是否显示数据索引
treeType: true,//是否为树形表格
isFold: true,//树形表格中父级是否默认折叠
expandType: false,//是否为展开行类型表格（为 True 时，需要添加作用域插槽, 它可以获取到 row, rowIndex)
selectionType: false,//是否显示间隔斑马纹
},
// 商品分类列表
cataList:[],
// 查询条件
queryInfo:{
type:3,
pagenum:1,
pagesize:5
},
total:0,
//表格标题数据
columns: [
{
label: "分类名称",
prop: "cat_name"
},
{
label: "描述",
prop: "description",
minWidth: "50px"
},
{
label: "排序",
prop: "cat_level"
},
{
label: "状态",
prop: "active",
type: "template",
template: "active"
},
]
}
},
components:{
},
created() {
this.getCateList()
},
methods:{
// get请求用params接收
getCateList(){
this.$http.get('categories',{params:this.queryInfo}).then(res=>{
if(res.data.meta.status!==200){
this.$message.error('获取列表失败')
}else{
this.cataList=res.data.data.result
// 为表格赋值条数
this.total=res.data.data.total
}
})
},
// 改变一页展示多少条带参数参数是新的size
handleSizeChange(newSize){
this.queryInfo.pagesize=newSize;
this.getCateList()
},
// 当前页发生改变
handleCurrentChange(newNum){
this.queryInfo.pagenum=newNum
this.getCateList()
}

}
}
</script>

<style scoped>

</style>

效果图
在这里插入图片描述