Using jsx in el-table-column's formatter function

[youthug]

Hi there.
I defined a variable: columns in column-config.js :

const columns = [
    {
        label: 'First Name',
        prop: 'firstName',
        defaultShow: true,
        minWidth: '180px',
        // TODO return el-tag
        formatter(row, column, cellValue) {
            return (
                <el-tag>{ cellValue }</el-tag>
            )
        }
    },
    {
        label: 'Last Name',
        prop: 'lastName',
        defaultShow: true,
        minWidth: '180px'
    }
]

export {
    columns
}

And use it in App.vue:

<template>
    <div id="app">
        <el-table :data="tableData">
            <!-- bind all attrs -->
            <el-table-column v-for="(col, i) in columns" :key="i" v-bind="col"/>
        </el-table>
    </div>
</template>

<script>
import { columns } from "@/config/column-config";

...

Then I got errors in console: TypeError: h is not a function

Here is my code: jsx-demo

Is there any way to return templates in .js files outside render and data function?

Thx.

[HawtinZeng]

I have extracted the JSX template into another SFC, it is pretty complicated, but it works! I found something interesting when I used function declaration directly in the script tag of a SFC outside of the render function, I got an error that prompted me "h is not defined", but when I used the function declaration inside an Object, like
const testTemplateGenerator = { renderColFormItem() { return ( <h1>123</h1> ) } } // call in render function: return testTemplateGenerator.renderColFormItem.call(this),
The error is gone! I guess that curly braces may create a scope that provides the "h" function.