官網示例

使用方式

	// 表格中加入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.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
   },}
 },

最終實現的效果

最終實現表格行樣式的自定義

補充知識：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屬性的使用說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。