vue+element-ui怎么使用v-for生成table-column

我之前用react+antd开发项目，转为vue+element-ui之后，发现antd和element-ui两者在table组件的传值上有点点不同，而我对antd先入为主了，所以想把element-ui的table做一些小小改变。

在antd中，table的表头仅需传一个数组形式的column给组件即可，可以用很少的html代码量实现，类似于下面这样：

const dataSource = [
    {key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号'},
    {key: '2', name: '胡彦祖', age: 42,address: '西湖区湖底公园1号'},
  ];

const columns = [
  {title: '姓名',dataIndex: 'name',key: 'name'},
  {title: '年龄',dataIndex: 'age',key: 'age'},
  {title: '住址',dataIndex: 'address',key: 'address'},
];

<Table dataSource={dataSource} columns={columns} />

在element-ui中，却要用很多html代码才能实现上述表头

<el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name"label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

但好在vue有v-for和v-html，v-for可用来实现数组遍历，v-html可以将数据输出为真正的html，我将表头放在一个数组中，不能直接展示出来的用一个render函数处理，用v-html将render的返回值放到一个div标签下：

<el-table :data="tableData" height="100%" class="service-table" size="mini" v-loading="loading" stripe width="100%">
      <el-table-column v-for="item in tableList" :key="item.id" :label="item.label" :width="item.width" :fixed="item.fix">
          <template slot-scope="scope">
                <div v-if="item.render" v-html="item.render(scope.row)"></div>
                <div v-else v-text="scope.row[item.prop]"></div>
          </template>
      </el-table-column>
</el-table>

tableList: Object.freeze([
    {id: 1, label: '序号', prop: 'id'},
    {id: 2, label: '名称', prop: 'name'},
    {id: 3, label: '业务', prop: 'service'},
    {id: 4, label: '商品', prop: 'food'},
    {id: 6, label: '价格', render: ({price}) => { return `<div>¥${price/100}</div>`}},
    {id: 7, label: '有效期', render: ({start_time, end_time}) => { return `<div>${formatDate(start_time, 'yyyy-MM-dd hh:mm:ss') + '~' + formatDate(end_time, 'yyyy-MM-dd hh:mm:ss')}</div>`}, width: '280'},
    {id: 9, label: '状态', render: ({status}) => { return `<div>${this.$constants.ops.ACTIVITY_STATUS[Number(status) + 1]}</div>`}},
]), 

这样一个类antd的table column就写好了，但至于这样对性能会不会有什么影响我是不确定的，有知道的朋友也可以告诉我一声～～