el-table-column动态加载列
问题: (vue.js)elementUI中el-table 如何动态生成列描述:比如:有一个table,他的列是不固定的,想动态加载出来;columnList里是存放动态列的数据,如果有2列以上数据,是可以正常展示;但是如果只有1列数据,后面的calculationResultsWarn列中的数据就会展示成warningIntervalWarn的数据。。代码如下:
·
问题: (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>
更多推荐
已为社区贡献2条内容
所有评论(0)