elementUI在table动态生成列

• 需求是这样子的：（点击下图下拉列表中的选项，红色方框中的 列是动态生成的）

image.png

image.png

• 后端数据结构是这样的：

image.png

• 话不多说，直接上代码：

         <el-table
              :data="tableData"
              tooltip-effect="dark"
              border
              @cell-click="cellClick"
              :cell-class-name="changeTrStyle"
              highlight-current-row
              style="width: 100%">
              <el-table-column
                type="index"
                align="center"
                width="50">
              </el-table-column>
              <el-table-column
                prop="title"
                label="需求"
                align="center"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                v-for="(item,index) in clientList"
                :key="index"
                :label="item"
                align="center"
                show-overflow-tooltip>
                  <template slot-scope="scope">
                    <div v-if="scope.row.progressRate[index].status == 20010" >未开发</div>
                    <div v-if="scope.row.progressRate[index].status == 20011">开发中</div>
                    <div v-if="scope.row.progressRate[index].status == 20012">测试中</div>
                    <div v-if="scope.row.progressRate[index].status == 20013">待发布</div>
                    <div v-if="scope.row.progressRate[index].status == 20014">已上线</div>
                    <div>{{scope.row.progressRate[index].updateTime}}</div>
                  </template>
              </el-table-column>
              <el-table-column label="操作" align="center" width="120">
            　　　　<template slot-scope="scope">
                      <el-row>
                        <el-col :span="12">
                            <el-button type="primary" size="small" icon="el-icon-edit" @click="editItem(scope)"></el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteItemConfirm(scope)"></el-button>
                        </el-col>
                      </el-row>
            　　　　</template>
            　　</el-table-column>
            </el-table>

• 选择下拉列表后执行的方法:

  // 获取 项目 - 需求 - 列表
      getItemList(mid) {
        this.$http.get('/api/item/item/list', {
            params: {
                mid
            }
        })
        .then(res => {
            console.log('getItemList res:',res)
            if (res.data.code === 10000) {
                this.tableData = res.data.data.item;
                this.clientList = res.data.data.client;

            } else {
                this.$message.error(this.$utils.error(res.data.code));
            }
        })
        .catch(err => {
            console.log(err);
        });
      },