ant-design-vue中table使用customRender报错ReferenceError: h is not defined问题

官方文档说明的自定义字段的写法是指定scopedSlots,里面写个customRender指定相关字段插槽的名称。

<a-table>
  <a slot="name" slot-scope="text">{{ text }}</a>
</a-table>
{
  dataIndex: 'name',
  key: 'name',
  scopedSlots: { customRender: 'name' }
}

当然也可以直接在customRender中写JSX,如下所示:

{
  key: 'name',
  customRender: (val, row, index) => {
    return <span>{ val }</span>
  }
}

上述的代码都是直接写在.vue文件data中的,如果将customRenderJSX写法单独放在一个js文件中,然后引入使用的话就会出现[Vue warn]: Error in render: "ReferenceError: h is not defined"的报错异常。
网上搜索一些其他的答案,大致解决方法都是将JSX写法的内容直接移动到vue文件的data中,但是有时候某些通用的表格项列表想自定义引入,自己研究了下,发现可以使用mixin的方法形式达到目的:

建一个vue文件,如aMixin.vue

<template>
  <div></div>
</template>

<script>
  export default {
    data () {
      return {
        mixinColumns: [
          {
            key: 'name',
            customRender: (val, row, index) => {
              return <span>{ val }</span>
            }
          }
        ]
      }
    }
  }
</script>

然后再需要的地方进行引入

import aMixin from 'aMixin.vue'
<script>
  export default {
    mixins: [aMixin],
    create () {
      console.log(this.mixinColumns) // 这样就不会报h的错误了。
    }
  }
</script>

这样就可以愉快的使用了!!!

暂无评论

发送评论编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇