Ant-design-vue Table组件customRow属性的使用说明

 更新时间:2020年10月28日 10:51:44   作者:EasonGG  
这篇文章主要介绍了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行 绑定点击事件

目前在学习使用antd中,需求双击表格行显示pdf,在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属性的使用说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue组件之间通信方式实例总结【8种方式】

    vue组件之间通信方式实例总结【8种方式】

    这篇文章主要介绍了vue组件之间通信方式,结合实例形式总结分析了vue.js的8种组件通信方式与相关操作注意事项,需要的朋友可以参考下
    2019-02-02
  • vue+elementui实现拖住滑块拼图验证

    vue+elementui实现拖住滑块拼图验证

    这篇文章主要为大家详细介绍了vue+elementui实现拖住滑块拼图验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue中如何使用echarts和echarts-gl实现3D饼图环形饼图

    vue中如何使用echarts和echarts-gl实现3D饼图环形饼图

    现在vue是很多公司前端的主流框架,我目前所在公司接触的项目也都是使用vue来实现的,很少有完全使用原生的JavaScript来写项目的了,下面这篇文章主要给大家介绍了关于vue中如何使用echarts和echarts-gl实现3D饼图环形饼图的相关资料,需要的朋友可以参考下
    2023-03-03
  • .html页面引入vue并使用公共组件方式

    .html页面引入vue并使用公共组件方式

    这篇文章主要介绍了.html页面引入vue并使用公共组件方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vscode使用Eslint+Prettier格式化代码的详细操作

    vscode使用Eslint+Prettier格式化代码的详细操作

    这篇文章主要介绍了vscode使用Eslint+Prettier格式化代码,本文通过图文示例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • element table多层嵌套显示的实践

    element table多层嵌套显示的实践

    本文主要介绍了element table多层嵌套显示的实践,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue项目中使用setTimeout存在的潜在问题及解决

    Vue项目中使用setTimeout存在的潜在问题及解决

    这篇文章主要介绍了Vue项目中使用setTimeout存在的潜在问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • 使用element-ui实现行合并过程

    使用element-ui实现行合并过程

    这篇文章主要介绍了使用element-ui实现行合并过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue使用monaco editor汉化右键菜单示例

    vue使用monaco editor汉化右键菜单示例

    这篇文章主要为大家介绍了vue使用 monaco editor 汉化右键菜单实现汉化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue2.x集成百度UEditor富文本编辑器的方法

    vue2.x集成百度UEditor富文本编辑器的方法

    这篇文章主要为大家详细介绍了vue2.x集成百度UEditor富文本编辑器的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-09-09

最新评论