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函数
Aug 01 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
JS实现京东商品分类侧边栏
Dec 11 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
一步一步学习PHP(6) 面向对象
2010/02/16 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python实现单张图像拼接与批量图片拼接
2020/03/23 Python
python实现邮件循环自动发件功能
2020/09/11 Python
详解Anaconda 的安装教程
2020/09/23 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
人事助理岗位职责
2013/11/18 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
初三家长会邀请函
2014/01/18 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
幼儿园辞职信
2015/05/13 职场文书
python井字棋游戏实现人机对战
2022/04/28 Python