如何在iview组件中使用jsx

最近选用的框架iview表单组件的render写法让人有点不习惯，尤其是在写比较复杂的逻辑的时候，还是感觉模板式的写法比较方便且可读性较强。而render函数除了支持配置写法外，还支持jsx的写法。由于之前有用过react，因此对jsx并不陌生，可以直接上手。

1、安装插件

安装插件：transform-vue-jsx
如果需要使用v-model还需要安装jsx-v-model
在babelrc中配置

"plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"}],
    "transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }

2、使用及注意事项

下面粘贴的代码是Table组件的columns的配置项，这里需要注意的有2点：
1、需要全局注册组件，如输入框组件不可以写成Input必须写成i-input；
2、事件绑定：如点击事件需要携程onOn-click

{
            title: "关系名",
            key: "name",
            width: 180,
            render: (h, params) => {
              let { index, row } = params;
              return (
                

                  {this.editShow && this.editIndex === index ? (
                    
                      
                      
                    
                  ) : (
                    {`${row.cnName}(${row.name})`}
                  )}
                
              );
            }
          }