动态展示el-table表格表头

需求如图，在条件选择器选择了一项或多项条件后，将选中的条件作为表格表头展示：

1、下拉框中的数据结构为

options: [
    {
        value: 'value1',  //条件对应的编码
        label: '条件1'    //条件对应的文字名称
    },{
        value: 'value2',
        label: '条件2'
    },{
        value: 'value3',
        label: '条件3'
    }
    ...
]

所以选中后得到的数据一般为编码或是文字值：

[value1, value2, value3, ...]

// or

['条件1'， '条件2', '条件3', ...]

但本次需求除了需要获取文字值作为表格表头展示外， 也需要相应的value值作为后续数据处理使用，所以条件选择器写为

<div class="content">
    <div class="contentTitle">条件：</div>
        <el-select
            v-model="condition"
            placeholder="请选择"
            clearable
            multiple
            value-key="label"
            style="width: 500px;">
                <el-option 
                    v-for="option in list" 
                    :key="option.value" 
                    :label="option.label"
                    :value="option">
                </el-option>
        </el-select>
    </div>
</div>

其中重点有二，一是将el-option 中的:value=""绑定为数组中每一项的整个对象，而不是对象下边的某个具体属性；二是绑定值为对象类型时必填value-key属性，它将作为 value 唯一标识的键名。

具体el-select各属性详解可见：Element - The world's most popular Vue UI framework

现在我们可以得到选中的数据为：

this.tableHeader = [
    {value: "value1", label: "label1"},
    {value: "value2", label: "label2"},
    ...
]

el-table组件使用：

<el-table :data="tableList" :key="Math.random()">
    <el-table-column
        v-for="header in tableHeaders"
        :key="header.value"
        :prop="header.value"
        :label="header.label">
        <template slot-scope="scope">
            <el-input v-model="scope.row[header.value]" placeholder="请输入">
        </template>
    </el-table-column>
</el-table>

注意要为table绑定key值，否则表头顺序会被打乱