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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: