ant design vue中表格指定格式渲染方式


Posted in Javascript onOctober 28, 2020

注意点:定义的columns一定要写在data中,否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别

渲染方法1:

指定渲染函数:

const columns = [
   {
    title: '排名',
    dataIndex: 'key',
    customRender: renderContent // 渲染函数的规则
   }, {
    title: '搜索关键词',
    dataIndex: 'keyword',
    customRender: (text, row, index) => {
      if (index < 4) { // 前4行数据以a标签的形式被渲染
       return <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>
      }
      return { // 否则以独占4列的文本形式被渲染
       children: text,
       attrs: {
        colSpan: 4
       }
      }
    }
   }
]
const renderContent = (value, row, index) => {
 const obj = {
  children: value,
  attrs: {}
 }
 return obj
}

渲染方法2:

直接调用对应插槽模板:

<a-table :columns="columns" :dataSource="data" :pagination='pagination'>
  <template slot="operation">
    <a-select placeholder="选择操作" style="width: 100%" @change="listHandleChange">
     <a-select-option value="1">项目进度</a-select-option>
     <a-select-option value="2">质量管控</a-select-option>
     <a-select-option value="3">运维监控</a-select-option>
    </a-select>
  </template>
  <template slot='progress' slot-scope="text,record">
     <span>{{text}}</span>
     <span v-if='record.progressstatus'><a-icon class='arrow-up' type="arrow-up" />    </span>
     <span v-if='!record.progressstatus'><a-icon class='arrow-down' type="arrow-down" /></span>
  </template>
</a-table>
 
const columns = [
   {
    title: '编号',
    dataIndex: 'number',
    customRender: renderContent
   }, {
    title: '项目名称',
    dataIndex: 'name',
    customRender: (text, row, index) => {
     return {
      children: <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>,
      attrs: {}
     }
    } 
   }, {
    title: '项目进度',
    dataIndex: 'progress',
    scopedSlots: { customRender: 'progress' } // 模板中对应的slot-scope可以用来传递参数,其中第一个参数是当前字段对应的值progress,第二个参数是当前字段对应的所有值对象,即整个data[n]
   }, {
    title: '操作',
    dataIndex: 'operate',
    scopedSlots: { customRender: 'operation' } // 直接对应插槽名为operation的模板
   }
]
 
const data = [
  {
  key: 6,
  number: 6,
  name: '雅典娜',
  progress: '88%',
  progressstatus: 1
 }
]

补充知识:Ant design vue框架,table控件中customRow用法的一个坑

今天在写代码时,用到Ant design框架中的<a-table>控件,其中的一个需求是:点击table中的一行,需要执行一些操作。因为没有默认的行点击事件,需要用到customRow来进行自定义。

这个方法,在官方的文档中,有使用说明,如下:

<Table
 customRow={(record) => {
  return {
   props: {
    xxx... //属性
   },
   on: { // 事件
    click: (event) => {},    // 点击行
    dblclick: (event) => {},
    contextmenu: (event) => {},
    mouseenter: (event) => {}, // 鼠标移入行
    mouseleave: (event) => {}
   },

  };
 )}
 customHeaderRow={(column) => {
  return {
   on: {
    click: () => {},    // 点击表头行
   }
  };
 )}
/>

官方的这个写法,应该是属于lamada的语法,今天我在使用时,也是使用这种写法。

如下:

methods:{
 getDetailList(id){
  //执行具体的操作
  },
 rowClick: (record, index) => ({
    // 事件
    on: {
     click: event => {
      // 点击该行时要做的事情
      console.log('record', record)
      console.log('index', index)
      console.log('event', event)
      this.getDetailList(record.id) //这一行会报错,报未定义
     }
    }
   })
  }

在执行时,会报错,如下:

[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘getDetailList' of undefined”。

不使用lamada表达式,则不会出现这样的问题,修改后的rowClick方法如下:

rowClick(record, index) {
   return {
    on: {
     click: () => {
      console.log(record, index)
      this.getDetailList(record.matbillid)
     }
    }
   }
  },

可正常执行,并能正确调用getDetailList方法

以上这篇ant design vue中表格指定格式渲染方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
浅谈javascript对象模型和function对象
Dec 26 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
JavaScript小技巧整理
Dec 30 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 #Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 #Javascript
微信小程序picker组件两列关联使用方式
Oct 27 #Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 #Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 #Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 #Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 #Javascript
You might like
ftp类(myftp.php)
2006/10/09 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
python多进程操作实例
2014/11/21 Python
Python中的包和模块实例
2014/11/22 Python
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
python assert的用处示例详解
2019/04/01 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
SCDKey德国:全球领先的数字游戏市场
2019/04/09 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
大学生军训自我鉴定
2014/02/12 职场文书
募捐倡议书
2014/04/14 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫