antd vue 表格table列customRender标签标错：ReferenceError: h is not defined问题解决

最新推荐文章于 2024-07-31 14:43:54 发布

原创

最新推荐文章于 2024-07-31 14:43:54 发布 · 3.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

在使用Antd Vue的表格组件时，如果将列(columns)配置放在外部JS文件并导入，可能会遇到`h is not defined`的ReferenceError。解决方法是确保导出的默认对象不带有参数，即`export default {}`。如果外部文件定义为`export const columns = {}`，则需通过`require('xxx').columns`来获取列配置。

背景：

使用antd vue 的表格，列columns配置是在外部文件定义js文件，import导入, 如下，

import { columns} from './activity.js'

export default {
  data () {
    return {
        columns: columns
    }
  }
}

{
        title: '奖励道具',
        dataIndex: 'award_list',
        customRender: (list) => {
          return (
            <ul>
              {
                list.map(item => {
                  return <li>{item.item_name} * {item.item_count}</li>
                })
              }
            </ul>
          )
        },
        width: '50%'
      }

列配置包含需要动态渲染标签，然后就报错了

如果在data(){}内直接定义columns是不会报错的，但是我的配置又必须在外部文件配置，找了网上没找到方法但是想着直接引入js在data()内应该就行，于是用下面方法就ok

export default {
  data () {
    return {
        columns: require('../xml/activity').default
    }
  }
}

default是定义的js文件没有定参数，直接export default {}

如果定义了参数export const columns = {}，则取值应该是require('xxx').columns

最低0.47元/天解锁文章