ant design vue中表格如何实现指定格式渲染_程序开发

ant design vue中表格如何实现指定格式渲染

创始人

2024-11-17 18:00:48

0次

渲染方法1：

指定渲染函数：

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

渲染方法2：

直接调用对应插槽模板：


  
  

 
const columns = [
   {
    title: '编号',
    dataIndex: 'number',
    customRender: renderContent
   }, {
    title: '项目名称',
    dataIndex: 'name',
    customRender: (text, row, index) => {
     return {
      children: {text},
      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框架中的控件，其中的一个需求是：点击table中的一行，需要执行一些操作。因为没有默认的行点击事件，需要用到customRow来进行自定义。

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

{ 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)
     }
    }
   }
  },

以上就是ant design vue中表格如何实现指定格式渲染，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注行业资讯频道。

上一篇：MySql比较运算符正则式匹配REGEXP的方法

下一篇：python使用selenium实现爬虫知乎

ant design vue中表格如何实现指定格式渲染

相关内容

热门资讯