Vue在列表(table)列描述中(column)访问method中的方法

这里使用的ui库为 Ant Design Vue 1.7.8 版本

问题描述

在页面列表展示的时候我们有时候会根据后台返回的某些字段来展示对应的文字

例如：在列表最后面添加一个 操作 的列

这时候我们可以在 table 自带的 api 来实现

scopedSlots: { customRender: 'status' }

这样，然后再 table 元素中用 solt 来接收就好了, 同时可以添加 @click 来添加事件

<span slot="status" slot-scope="text,record,index" @click="onClickStatus"></span>

但是，如果当后台给出的数据不是一个单纯的字段，而是一个数组呢？

如果你想在 table 元素中 用 for 循环来实现，那可能会有一点麻烦!那么就需要用下边的方法

customRender: 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并

{
  title: '操作',
  align: 'center',
  dataIndex: 'status',
  customRender: (text, record, index) => {
    let examine = () => {
      this.toExamine(record)  // 调用method里面的方法
    }
    let ls = record.approvedUserList // 后台返回的数组数据
    if (record.status === '0') {
      return ''
    } else {
      if (ls.length > 0) {
        for (const index in ls) {
          if (ls[index].username === this.$store.getters.userInfo.username) {
            return (<a style="color:#1890ff;" onClick={ examine }>审核</a>)  // 这里只能调用原生方法，通过此原生方法作为中转去访问method中的方法
          }
        }
      } else {
        return ''
      }
    }
  }
}