问题: (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>


Logo

前往低代码交流专区

更多推荐