elementUI中el-table 如何动态生成列

Question

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

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

代码如下：

<el-table class="table-black" :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 class="warningInterval01" v-if="scope.row.warningIntervalWarn==01">绿区</div>
                                    <div class="warningInterval02" v-if="scope.row.warningIntervalWarn==02">黄区</div>
                                    <div class="warningInterval03" v-if="scope.row.warningIntervalWarn==03">红区</div>
                                </template>
                            </el-table-column>
                        </el-table>

公司图片上传不了，抱歉

Answer 1

类头也用v-for来搞，数据从data来即可。

啥也多不说了，上代码：

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<template>

<el-table :data="tableData" style="width: 100%">
  <el-table-column 
    v-for="col in cols"
    :prop="col.prop" :label="col.label" >
  </el-table-column>
</el-table>

<el-button raw-type="button" @click="addCol">
  添加一列
</el-button>

</template>
</div>
var Main = {

  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      cols: [
          {prop: 'date', label: '日期'},
        {prop: 'name', label: '姓名'},
      ]
    }
  },
  methods: {
      addCol(){
        this.cols.push({prop: 'address', label: '地址'})
    }
  }
}

var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
http://jsfiddle.net/6ar2jons/

Answer 2

可以考虑使用 render 方法做一层封装~