- 需求是这样子的：（点击下图下拉列表中的选项，红色方框中的 列是动态生成的）
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);
});
},
