el-table-column动态加载列

问题： (vue.js)elementUI中el-table 如何动态生成列

描述:比如：有一个table，他的列是不固定的,想动态加载出来；

columnList里是存放动态列的数据，如果有2列以上数据，是可以正常展示；但是如果只有1列数据，后面的calculationResultsWarn列中的数据就会展示成warningIntervalWarn的数据。。

代码如下：

                        <el-table :data="warnningDataList" >
                            <el-table-column property="monitorPeriodWarn" label="监控期"></el-table-column>
                            <el-table-column v-for="item in columnList" :property="item.columnCode" :label="item.columnLable"></el-table-column>
                            <el-table-column property="calculationResultsWarn" label="指标数值"></el-table-column>
                            <el-table-column property="warningIntervalWarn" label="预警结果">
                                <template scope="scope">
                                    <div v-if="scope.row.warningIntervalWarn==01">绿区</div>
                                    <div v-if="scope.row.warningIntervalWarn==02">黄区</div>
                                    <div v-if="scope.row.warningIntervalWarn==03">红区</div>
                                </template>
                            </el-table-column>
                        </el-table>

说明一点：scope.row.warningIntervalWarn中scope.row是固定写法，后面的字段是该列的banding的属性名

      还有一种方式，

<div v-if="scope.row.warningIntervalWarn==01">绿区</div> 可以改为

<span v-show="scope.row.warningIntervalWarn==01">绿区</span>