Ant-design-vue Table組件customRow屬性的使用說明
官網(wǎng)示例
使用方式
// 表格中加入customRow屬性并綁定一個(gè)custom方法 <a-table rowKey="stockOrderCode" :columns="columns" :dataSource="dataSource" :pagination="pagination" :customRow="customRow" > </a-table> // methods中定義方法 customRow(record, index) { return { // 這個(gè)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 }, }, } },
最終實(shí)現(xiàn)的效果
最終實(shí)現(xiàn)表格行樣式的自定義
補(bǔ)充知識(shí):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屬性的使用說明就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】
下面小編就為大家?guī)硪黄獀ue系列之動(dòng)態(tài)路由詳解【原創(chuàng)】。小編覺得挺不錯(cuò)的,現(xiàn)在就想給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置
這篇文章主要介紹了vue-cli3啟動(dòng)服務(wù)如何自動(dòng)打開瀏覽器配置,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法
今天小編就為大家分享一篇vue二級(jí)菜單導(dǎo)航點(diǎn)擊選中事件的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue項(xiàng)目中掃碼支付的實(shí)現(xiàn)示例(附demo)
本文主要介紹了vue項(xiàng)目中掃碼支付的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09在 vue-cli v3.0 中使用 SCSS/SASS的方法
關(guān)于如何在 vue-cli v3.0 中使用 SCSS/SASS,這里提供三種方案。感興趣的朋友通過本文一起學(xué)習(xí)吧2018-06-06