因为业务需要，需要设定复杂的AntDesignVue中Table组件的复杂表头，而且不想使用template模式，故通过JSX来解决

此处记录了JSX的使用，方法的监听，如何给方法传值等实践细节

for (let i in records) {
    this.columns.push({
        title: () => {
            return (
                <div>
                    <span>{records[i]['assessType_dictText']}票（{records[i]['assessWeight']}%）</span>
                    <a-button type='link' title='排序' vOn:click={this.sortTotal.bind(this, records[i]['assessType_dictText'])}
                            style='padding: 0 !important;margin-left: 5px;transform:rotate(90deg);'>
                    <a-icon type='swap' />
                    </a-button>
                </div>
            )
        }
    })
}

<a-space direction="vertical">
  {
    filterDictText(this.safetyMeasuresDictOptions, record.yxfsUnstandardDetail.safetyMeasures).split(',').map(item => {
      return (
        <a-tag color="blue">{item}</a-tag>
      )
    })
  }
</a-space>

总结：

• return的值只能有一个根节点，所以用div进行包裹
• 模板内部的变量使用{}单花括号引用，例：{records[i]['assessType_dictText']}
• 类似click等事件无法使用@符号，也不可以使用v-on的语法，要改成驼峰，例：vOn:click
• 事件的调用需要使用{}单花括号包裹，调用方法需要加this关键字，如果需要传值，则需要使用bind函数，例：vOn:click={this.sortTotal.bind(this, records[i]['assessType_dictText'])}
• Vue中jsx不支持v-for，所以要用map循环代替
• Vue中使用JSX的详细文档：https://github.com/vuejs/jsx#installation

To Be Continued！😎