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 相关文章推荐
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 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
PHP 实例化类的一点摘记
2008/03/23 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
python文件写入实例分析
2015/04/08 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
2020/04/28 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
一套Delphi的笔试题一
2016/02/14 面试题
企业办公室主任岗位职责
2014/02/19 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书
《司马光》教学反思
2016/02/22 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python