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: {
// 鼠標單擊行
click: event => {
// do something
},
},
}
},
最終實現(xiàn)的效果
最終實現(xiàn)表格行樣式的自定義
補充知識：ant-design-vue 中table行 綁定點擊事件
目前在學習使用antd中，需求雙擊表格行顯示pdf，在table中給customRow設置行屬性
<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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue組件之間通信方式,結合實例形式總結分析了vue.js的8種組件通信方式與相關操作注意事項,需要的朋友可以參考下2019-02-02
這篇文章主要為大家詳細介紹了vue+elementui實現(xiàn)拖住滑塊拼圖驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue中如何使用echarts和echarts-gl實現(xiàn)3D餅圖環(huán)形餅圖
現(xiàn)在vue是很多公司前端的主流框架,我目前所在公司接觸的項目也都是使用vue來實現(xiàn)的,很少有完全使用原生的JavaScript來寫項目的了,下面這篇文章主要給大家介紹了關于vue中如何使用echarts和echarts-gl實現(xiàn)3D餅圖環(huán)形餅圖的相關資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了.html頁面引入vue并使用公共組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vscode使用Eslint+Prettier格式化代碼的詳細操作
這篇文章主要介紹了vscode使用Eslint+Prettier格式化代碼，本文通過圖文示例代碼相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
本文主要介紹了element table多層嵌套顯示的實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue項目中使用setTimeout存在的潛在問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了使用element-ui實現(xiàn)行合并過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了vue使用?monaco?editor?漢化右鍵菜單實現(xiàn)漢化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了vue2.x集成百度UEditor富文本編輯器的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09