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 新浪背投广告实现代码
Jul 07 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
全面理解JavaScript中的继承(必看)
Jun 16 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 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
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python 中的 else详解
2016/04/23 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
python编程实现希尔排序
2017/04/13 Python
python tkinter控件布局项目实例
2019/11/04 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
优秀共产党员先进事迹
2014/01/27 职场文书
服务行业口号
2014/06/11 职场文书
入党介绍人意见2015
2015/06/01 职场文书
惊天动地观后感
2015/06/10 职场文书
关于远足的感想
2015/08/10 职场文书
教师节主题班会方案
2015/08/17 职场文书
2016年党建工作简报
2015/11/26 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis