在View UI中，表格組件Table是一個常用組件，表格組件重要的元素是列columns,如果僅僅是單調的純文本功能展示，那么在使用組件時，在columns中定義好映射就算完成了。但是我們大部分需求並沒有那么簡單。我們可能會遇到如下需求：
- 某一列渲染一個可點擊的鏈接
- 某一列渲染一個可以放大的圖片
- 某一列渲染一個可操作的按鈕
- 某一列渲染一個好看的頭像
- 某一列渲染標簽
以上種種操作就需要配合單元格（也稱作為columns數據的項）的渲染函數render，自定義渲染當前列，包括
- 渲染自定義組件
- 原生的html標簽
- View UI組件
render 函數傳入兩個參數：
- 第一個是 h
- 第二個是對象，包含
row、column和index，分別指當前單元格數據，當前列數據，當前是第幾行。
下面就以上面幾個需求為例介紹render的用法：
{
title: '',
key: '',
render: (h: any, params: any) => {
return h('元素', {元素性質}/[元素性質],"元素內容"/[元素內容]),
}
}
1.渲染可點擊的鏈接
{
title: '直播地址',
width: 100,
key: 'liveUrl',
render: (h: any, params: any) => {
return h(
'a',
{
attrs: {
href: params.row.liveUrl,
target: '_blank',
},
},
'直播地址'
)
}
2.渲染可操作的按鈕
這里按鈕是用的View UI的按鈕Button組件，所以這里的使用范疇就是渲染組件。
{
title: '操作',
key: 'Actions',
width: 150,
render: (h: any, params: any) => {
return h('div', [
h(
'Button',
{
props: {
type: 'primary',
size: 'small',
},
style: {
marginRight: '5px',
},
on: {
click: () => {
//按鈕點擊事件
},
},
},
'編輯'
),
h(
'Button',
{
props: {
type: 'error',
size: 'small',
},
on: {
click: async () => {
//彈出模態框
this.$Modal.confirm({
title: '提示',
content: '刪除確認',
okText: '確認',
cancelText: '取消',
onOk: async () => {
//點擊確認后 作的操作
},
})
},
},
},
'刪除'
),
])
},
}
3.渲染可放大的圖片
這里需要View UI的模態框Modal組件的配合。
qrCodeShow: boolean = false
qrCodeUrl: string = ''
//...
{
title: this.L('直播二維碼'),
width: 120,
align: 'center',
key: 'qrCode',
render: (h, params) => {
return h('div', [
h('img', {
style: {
width: '45px',
height: '45px',
verticalAlign: 'middle',
marginTop: '3px',
marginBottom: '3px',
},
attrs: {
src: params.row.qrCode,
},
on: {
click: (e) => {
//點擊預覽圖片
this.handleView(e.srcElement.currentSrc)
},
},
}),
])
},
},
//...
handleView(url) {
this.qrCodeUrl = url
this.qrCodeShow = true
}
<Modal v-model="qrCodeShow"
title="展品二維碼">
<img :src="qrCodeUrl"
v-if="qrCodeShow"
style="width:100%;height:100%">
<!--取消對話框默認按鈕-->
<div slot="footer"></div>
</Modal>
4.渲染頭像
網站后台管理界面，經常會用用戶管理的功能，所以對用戶的頭像渲染也成了剛需。
render: (h: any, params: any) => {
return h('div', [
//頭像
h('Avatar', {
props: {
shape: 'square',
src:
params.row.head == null
? require('../../images/usericon.jpg')
: params.row.head,
},
}),
//用戶名
h(
'span',
{
style: {
'margin-left': '8px',
'margin-right': '10px',
},
},
params.row.username
)
])
},
5.渲染標簽
單調的狀態，提示，通過標簽讓界面看起來更生動，ps:這里依然用到了View UI的標簽Tag組件。
{
title: '狀態',
width: 120,
key: 'status',
render: (h: any, params: any) => {
return h(
'Tag',
{
props: {
color:
params.row.status == 1
? 'success'
: params.row.status == 2
? 'default'
: 'error',
},
},
//獲取狀態名稱
this.getCodeText('EnumAuditStatus', params.row.status)
)
},
},
作者：Garfield
同步更新至個人博客:http://www.randyfield.cn/
本文版權歸作者所有，未經許可禁止轉載，否則保留追究法律責任的權利，若有需要請聯系287572291@qq.com