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 学习技巧
Feb 17 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
详解webpack-dev-server使用方法
Sep 14 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下使用以下代码连接并测试
2008/04/09 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Windows下PyMongo下载及安装教程
2015/04/27 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
解决uWSGI的编码问题详解
2017/03/24 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python 如何使用find和find_all爬虫、找文本的实现
2020/10/16 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
代理协议书范本
2014/04/22 职场文书
2014年秋季开学寄语
2014/08/02 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
公司员工手册范本
2015/05/14 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python