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


Posted in Javascript onOctober 28, 2020

官网示例

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 ? 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
   },
  },
  }
 },

最终实现的效果

最终实现表格行样式的自定义

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

补充知识:ant-design-vue 中table行 绑定点击事件

目前在学习使用antd中,需求双击表格行显示pdf,在table中给customRow设置行属性

Ant-design-vue 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属性的使用说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
通过JS判断网页是否为手机打开
Oct 28 #Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 #Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 #Javascript
ant design vue中表格指定格式渲染方式
Oct 28 #Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 #Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 #Javascript
微信小程序picker组件两列关联使用方式
Oct 27 #Javascript
You might like
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
二招解决php乱码问题
2012/03/25 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
Javascript中神奇的this
2016/01/20 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
python实现简单多人聊天室
2018/12/11 Python
python正则-re的用法详解
2019/07/28 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
联想德国官网:Lenovo Germany
2018/07/04 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
幼儿园小班家长寄语
2014/04/02 职场文书
请假条范文大全
2014/04/10 职场文书
房屋转让协议书范本
2014/04/11 职场文书
幼儿园运动会口号
2014/06/07 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
办公室管理规章制度
2015/08/04 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android