vue.js - 如何优化包含日期和非日期列的Vue Element UI表格代码？

Question

这段代码该怎么优化?
这个表格可以看成两部分，左侧部分表头为非日期，右部分表头为日期。
右部分日期可能会有很多，我让左侧固定，右侧的部分可以滚动，但是我下面实现代码的if-else部分有很多冗余的部分。

我觉得这个fixed属性接口的设计可能不太好吧

 <el-table :data="tableData" border>
        <template v-for="item in fields">
          <el-table-column v-if="/\d{4}-\d{1,2}-\d{1,2}/.test(item.prop)" :label="item.name" :prop="item.prop" header-align="center"></el-table-column>
          <el-table-column v-else :label="item.name" :prop="item.prop" fixed="left" header-align="center" ></el-table-column>
        </template>
</el-table>

Answer 1

可以先把fields转化为适用的columns，然后遍历columns。vue是数据驱动视图，最好是操作数据

let columns = fields.map(item => {
    let fixed = /\d{4}-\d{1,2}-\d{1,2}/.test(item.prop) ? 'left' : undefined
    return {
        label: item.name,
        prop: item.prop,
        fixed
    }
})

<el-table :data="tableData" border>
     <el-table-column v-for="item in columns" ...item header-align="center"></el-table-column>
</el-table>