Vue Render自定义table单元格内容
# 解决问题
只举一个例子(我正好需要用到的)
在写中后台时, 如果对 表格组件 再度封装了, 比如这样的
以element-ui 为例:
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
对html数据化, 封装成一个组件.
// complex-table.vue
<template>
<el-table
:data="list"
style="width: 100%;"
>
<el-table-column v-for="col in columns" :key="col.prop" v-bind="col"></el-table-column>
</el-table>
</template>
<script>
export default {
props: {
columns: Array
}
}
</script>
--------------------------
// index.vue
<template>
<div class="box_container">
<complex-table
:columns="tableColumns"
/>
</div>
</template>
<script>
export default {
data() {
return {
tableColumns: [
{ label: '日期', prop: 'sn', align: 'center' },
{ label: '姓名', prop: 'phone', align: 'center' },
{ label: '地址', prop: 'address', align: 'center' }
]
}
}
}
</script>
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
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
那么问题来了, 如果我要在table中加入头像列, 但是后端返回的是url地址, 你又怎么办呢,你可以这样
// complex-table.vue
...
<el-table>
<el-table-column v-for="col in columns" :key="col.prop" v-bind="col">
<template slot-scope="scope">
<template v-if="col.prop==='avatar'">
<el-avatar :src="row.avatar" />
</template>
<template v-else>
<span>{{ scope.row[col.prop] }}</span>
</template>
</template>
</el-table-column>
</el-table>
...
// index.vue
...
data() {
return {
tableColumns: [
{ label: '头像', prop: 'avatar', align: 'center' },
{ label: '日期', prop: 'date', align: 'center' },
{ label: '姓名', prop: 'name', align: 'center' },
{ label: '地址', prop: 'address', align: 'center' }
]
}
}
...
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
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
万一又是**<el-tag>** 标签, **el-button** 不能一直v-if吧
或许也可以使用 <component :is="**" v-bind="**" >这种形式, 如果遇到方法传值又感觉差点什么,差scope传值了
# 解决方案
使用函数式组件, 可灵活使用, 原理跟 valueFormat 类似, 不废话直接上代码
新建文件columnRender.js
/*
* @Description: 函数式组件渲染单元表格
* @Author: 仲灏<izhaong 164165005@qq.com>
* @Date: 2020-09-16 15:33:25
* @LastEditors: 仲灏<izhaong 164165005@qq.com>
* @LastEditTime: 2020-09-16 15:47:23
*/
export default {
functional: true,
props: {
row: Object,
render: Function
},
render(h, ctx) {
const params = {
row: ctx.props.row
}
return ctx.props.render(h, params)
}
}
// complexTable
...
<template v-else-if="'render' in col">
<!-- <component :is="col.tag" v-bind="col.attrs">{{ col.tagValue }}</component> -->
<Render :row="row" :render="col.render" />
</template>
...
// index.js
tableColumns: [
{ label: 'name', prop: 'name', align: 'center' },
{ label: '是否有效', prop: 'isValid', align: 'center', render: (h, { row }) => {
return h('el-tag', { attrs: { type: row.isValid ? 'success' : 'info' }}, row.isValid ? '有效' : '无效')
} }
]
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
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
# 结语
第一次bb这个多话, 之前直接就啪~ 贴代码了.
当然如果封装的组件足够强大, 能够兼顾涵盖该项目大部分业务, 就可以把组件当做页面使用, 全部使用纯数据驱动, 当然你的业务相似度要高
# 最终代码
complexTable.vue
<!--
* @Descripttion: 数据化表格
* @version: 1.0.0
* @Author: 仲灏 Izhaong<164165005@qq.com>
* @Date: 2020-06-27 15:13:00
* @LastEditors: 仲灏<izhaong 164165005@qq.com>
* @LastEditTime: 2020-11-20 10:22:20
-->
<template>
<div class="complex-table_container app-container">
<div class="filter-container d-flex align-items-center">
<component
:is="filter.is"
v-for="(filter, index) in filters"
:key="index"
v-model="filterForm[filter.prop]"
v-bind="filter.attrs"
class="filter-item mr-10"
>
<template v-if="filter.options">
<el-option
v-for="(option, i) in filter.options"
:key="`${index}_${i}`"
:value="option.value"
:label="option.label"
/>
</template>
</component>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
<slot name="action">
<el-button
v-if="crud.includes('c')"
class="filter-item"
style="margin-left: 10px;"
type="primary"
icon="el-icon-edit"
@click="$emit('createItem')"
>添加</el-button>
</slot>
</div>
<el-table
:key="tableKey"
v-loading="listLoading"
:height="tableHeight"
:data="list"
size="small"
border
style="width: 100%;"
>
<el-table-column
type="index"
width="50"
/>
<el-table-column v-for="col in columns" :key="col.prop" v-bind="col">
<template v-if="'index' in col" slot-scope="{row}">
<template v-if="'render' in col">
<Render :row="row" :render="col.render" />
</template>
<span v-else>{{ col.formatter ? col.formatter(row) : row[col.prop] }}</span>
</template>
</el-table-column>
<el-table-column v-if="handle.length" v-bind="handleColumn" :width="(handle.length * 80)+'px'">
<template slot-scope="scope">
<template v-for="(btn, index) in handle">
<el-button
v-if="!btn.isPop"
:key="index"
style="margin: 5px;"
size="mini"
:type="btn.type"
@click.native.prevent="btn.method(scope.row,scope)"
>{{ btn.label }}</el-button>
<el-popconfirm
v-if="btn.isPop"
:key="index"
placement="right"
confirm-button-text="确定"
cancel-button-text="取消"
icon="el-icon-info"
icon-color="red"
title="确定删除吗？"
@onConfirm="getList();btn.method(scope.row, scope)"
>
<el-button
slot="reference"
style="margin: 5px;"
size="mini"
:type="btn.type"
>{{ btn.label }}</el-button>
</el-popconfirm>
</template>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>listQuery.size"
style="padding: 8px 16px; margin-top: 10px;"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.size"
@pagination="getList"
/>
</div>
</template>
<script>
import Pagination from '@/components/Pagination'
import Render from './render'
export default {
name: 'ComplexTable',
components: { Pagination, Render },
props: {
columns: { type: Array, default: () => [] },
operates: { type: Array, default: () => [] },
handle: { type: Array, default: () => [] },
filters: { type: Array, default: () => [] },
crud: { type: String, default: 'crud' },
actionsColumn: {
type: Object,
default: () => ({
label: '操作',
align: 'center'
})
},
handleColumn: {
type: Object,
default: () => ({
label: '操作',
align: 'center'
})
},
// eslint-disable-next-line vue/require-default-prop
api: [Function, Object]
},
data() {
return {
filterForm: {},
tableKey: 0,
list: null,
total: 0,
listLoading: true,
listQuery: {
page: 1,
size: 20
}
}
},
computed: {
tableHeight() {
if (this.total > this.listQuery.size) {
return window.document.body.clientHeight - 242
} else {
return window.document.body.clientHeight - 180
}
}
},
created() {
this.initFilters()
this.getList()
},
methods: {
inpubr($event) {
event.target.blur()
},
initFilters() {
const props = this.filters.map((item) => item.prop)
props.forEach((key) => {
this.$set(this.filterForm, key, '')
})
},
getList() {
this.listLoading = true
this.api({ ...this.listQuery, ...this.filterForm }).then((response) => {
this.list = response.data.items
this.total = response.data.total
this.listLoading = false
})
},
handleFilter() {
this.listQuery.page = 1
this.getList()
}
}
}
</script>
<style lang="scss">
.complex-table_container {
.el-table__body-wrapper {
&::-webkit-scrollbar {
/*滚动条整体样式*/
width: 6px !important;
/*高宽分别对应横竖滚动条的尺寸*/
height: 6px !important;
background: #ffffff !important;
cursor: pointer !important;
}
&::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 5px !important;
-webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5) !important;
background: rgba(63, 98, 131, 0.8) !important;
cursor: pointer !important;
}
&::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, 0.5) !important;
border-radius: 0 !important;
background: rgba(240, 240, 240, 0.5) !important;
cursor: pointer !important;
}
}
}
</style>
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
上次更新: 2022/06/05, 20:31:36