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 相关文章推荐
js导入导出excel(实例代码)
Nov 25 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
JS实现的对象去重功能示例
Jun 04 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
基于JQuery实现页面定时弹出广告
May 08 jQuery
vue基于better-scroll仿京东分类列表
Jun 30 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHPMailer安装方法及简单实例
2008/11/25 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
numpy中的高维数组转置实例
2018/04/17 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
python异常处理和日志处理方式
2019/12/24 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
2014年自我评价
2014/01/04 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
高一化学教学反思
2016/02/22 职场文书