Ant-design-vue Table組件customRow屬性的使用說明
更新時間:2020年10月28日 10:51:44 作者:EasonGG
這篇文章主要介紹了Ant-design-vue Table組件customRow屬性的使用說明,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
官網(wǎng)示例

使用方式
// 表格中加入customRow屬性并綁定一個custom方法
<a-table
rowKey="stockOrderCode"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:customRow="customRow"
>
</a-table>
// methods中定義方法
customRow(record, index) {
return {
// 這個style就是我自定義的屬性,也就是官方文檔中的props
style: {
// 字體顏色
color: record.remarkDesc ? record.remarkDesc.fontColor : 'rgba(0, 0, 0, 0.65)',
// 行背景色
'background-color': record.remarkDesc ? record.remarkDesc.bgColor : '#ffffff',
// 字體類型
'font-family': record.remarkDesc ? record.remarkDesc.fontType : 'Microsoft YaHei',
// 下劃線
'text-decoration':
record.remarkDesc && record.remarkDesc.underline ? 'underline' : 'unset',
// 字體樣式-斜體
'font-style': record.remarkDesc && record.remarkDesc.italics ? 'italic' : 'unset',
// 字體樣式-斜體
'font-weight': record.remarkDesc && record.remarkDesc.bold ? 'bolder' : 'unset',
},
on: {
// 鼠標(biāo)單擊行
click: event => {
// do something
},
},
}
},
最終實現(xiàn)的效果
最終實現(xiàn)表格行樣式的自定義

補(bǔ)充知識:ant-design-vue 中table行 綁定點(diǎn)擊事件
目前在學(xué)習(xí)使用antd中,需求雙擊表格行顯示pdf,在table中給customRow設(shè)置行屬性

<a-table
bordered
:rowSelection="rowSelection"
:columns="columns"
:dataSource="data"
rowKey="id"
:customRow="Rowclick"
:pagination="pagination"
:scroll="{ y: 520 }"
size="small"
>
<span slot="sex" slot-scope="sex">
{{ sex == 1 ? "男" : sex == 0 ? "女" : "/" }}
</span>
<span slot="status" slot-scope="status">
{{ status == 1 ? "已打印" : "未打印" }}
</span>
</a-table>
methods中
Rowclick(record, index) {
return {
on: {
click: () => {},
dblclick: () => {
console.log(record, index, 2222);
this.showPdf = true;
let url = "demo.pdf";
this.pSrc = "/static/pdf/web/viewer.html?file=" + url;
// window.open("/static/pdf/web/viewer.html?file=" + url);
}
}
};
},
以上這篇Ant-design-vue Table組件customRow屬性的使用說明就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
在 vue-cli v3.0 中使用 SCSS/SASS的方法
關(guān)于如何在 vue-cli v3.0 中使用 SCSS/SASS,這里提供三種方案。感興趣的朋友通過本文一起學(xué)習(xí)吧2018-06-06

