Ant-design-vue Table组件customRow属性的使用说明

	// 表格中加入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 "" src="/UploadFiles/2021-04-02/20201028101656.jpg">

补充知识：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" + url;
   // window.open("/static/pdf/web/viewer.html" + url);
   }
  }
  };
 },


以上这篇Ant-design-vue Table组件customRow属性的使用说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。