element-ui表格使用jsx创建自定义列

参考文章: 使用jsx配置element-ui的table - SegmentFault 思否

element ui 文档说明(详见:formatter属性说明): 组件 | Element

<script>

export default {
  name: "TableJsx",
  data() {
    return {
      options: [
        {label: '日期', prop: 'date'},
        {
          label: '配送信息',
          prop: '',
          children: [
            {label: '姓名', prop: 'name'},
            {
              label: '地址',
              prop: '',
              children: [
                {label: '省份', prop: 'province'},
                {label: '市区', prop: 'city'},
                {label: '地址', prop: 'address'},
                {label: '邮编', prop: 'zip'},
              ],
            },
          ],
        },
        {
          label: '操作', renderItem:(row, column, cell)=>{
            console.log('item', row, column, cell)
            return <button>按钮</button>
          }
        }
      ],
      tableValues: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路',
          zip: 200333,
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路',
          zip: 200333,
        },
      ],
    }
  },
  methods: {
    // 递归函数
    recursion(arrs) {
      return arrs.map((item) => {
        if (!!item.children) {
          return (
              <el-table-column label={item.label}>
                {this.recursion(item.children)}
              </el-table-column>
          )
        } else {
          if (item.renderItem) {
            return <el-table-column label={item.label} formatter={item.renderItem}>
            </el-table-column>
          } else {
            return this.createElTableColumn(item.prop, item.label)
          }
        }
      })
    },

    createElTableColumn(prop, label) {
      return <el-table-column prop={prop} label={label}></el-table-column>
    },
  },
  render(h) {
    console.log(h)
    return (
        <el-table
            border
            data={this.tableValues}
            style="width: 100%"
            style="width: 100%;margin: 20px 0;"
            className="merge-header-table"
            header-cell-style={() => {
              return {background: '#f9f9f9'}
            }}
        >
          {this.recursion(this.options)}
        </el-table>
    )
  }
}
</script>

<style scoped>

</style>