Skip to content

table 组件columns选项在组件外部定义时,customRender中使用jsx报错 #1183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
1 task
curry-Yang opened this issue Sep 12, 2019 · 10 comments
Closed
1 task
Labels

Comments

@curry-Yang
Copy link

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

undefined

Environment

vue:2.6.10 chrome :76

Reproduction link

Edit on CodeSandbox

Steps to reproduce

使用table组件,组件外部定义columns

What is expected?

jsx正常运行

What is actually happening?

报错:h is not defined

@sendya
Copy link
Member

sendya commented Sep 16, 2019

对象外不存在 Vue 生命周期的 this 和 this.$createElement ,如果是直接在对象内写,Vue 的编译器会自动为其加上 h 的定义,否则 请自己想办法把 h 注入进去

@EmiyaYang
Copy link

EmiyaYang commented Nov 14, 2019

// h 被隐式调用,定义时不可省略或更名
const generateColumns = function (h) {
     return [{ title: "inject",  customRender: val => ({ children: <a>{val}</a> }), }]
}

export default {
     data() {
         return {
             columns: []
         }
     },
     mounted() {
         this.columns = generateColumns(this.$createElement);
    }
}

@EmiyaYang
Copy link

EmiyaYang commented Dec 4, 2019

@tangjinzhou 有考虑在 customRender 中自动注入 h 吗?这样就省去了使用 JSX 的麻烦。
我可以提个PR

@dcdlove
Copy link

dcdlove commented Jan 17, 2020

文档上没说明傻乎乎在那排查了一个早上,后来才发现必须定义在data里面。。。。。。为什么不自动注入,想内置一些自定义渲染模版都不行

@776A0A
Copy link

776A0A commented Aug 3, 2020

可以这样写

// config.js
const h = new Vue().$createElement
export default [
  {
     title: '状态',
     dataIndex: 'status',
     customRender: status => (
       <a-tag color={status === 1 ? 'blue' : 'red'} style='margin:auto;'>
         {status === 1 ? '已发布' : '未发布'}
      </a-tag>
     )
  }
]

@alz8888
Copy link

alz8888 commented Oct 23, 2020

官方的pro体验版里没有写h,为什么不报错呢?好奇怪?求助!

@chenshuy
Copy link

chenshuy commented Nov 2, 2020

// const.js
export const columns = cxt => {
  /* eslint-disable-next-line */
  const h = cxt.$createElement
  return [
    {
      title: 'name',
      dataIndex: 'name',
      customRender: (text) => {
        return <span>{text}</span>
      }
    },
    ...
  ]
}
// list.vue
import { columns } from './const'

computed: {
  columns () {
    return columns(this)
  }
}

@Syntax-J
Copy link

使用computed 返回column对象就好,会内置h

@nongzhenli
Copy link

我是直接将 columns 初始化定值在data() 里面的,也会自动内置h()函数吧。这么操作我是可以使用的,不需要额外的设定 const h = this.$createElement()

@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 23, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

10 participants