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 相关文章推荐
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
3种js实现string的substring方法
Nov 09 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
JS中数组重排序方法
Nov 11 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
layui文件上传实现代码
May 20 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
two.js之实现动画效果示例
2017/11/06 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
详解Python自建logging模块
2018/01/29 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
python模块内置属性概念及实例
2021/02/18 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
教育实习生的自我评价分享
2013/11/21 职场文书
总裁秘书岗位职责
2013/12/04 职场文书
自考生自我评价分享
2014/01/18 职场文书
《散步》教学反思
2014/03/02 职场文书
工作散漫检讨书
2014/09/16 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
初中学生操行评语
2014/12/26 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python