vue2使用 element表格展开功能渲染子表格
默认样式
修改后
样式2
<el-table :data="needDataFollow" border style="width: 100%"><el-table-column align="center" label="序号" type="index" width="80" /><el-table-column align="center" label="计算方向" prop="direction" /><el-table-column align="center" label="需求内容" prop="demand_content" /><el-table-column align="center" label="文档/附件"><template #default="scope"><div class="img"><a v-for="(item, index) in scope.row.report" :key="index" :href="item.url"target="_blank">{{ item.name }}</a></div></template></el-table-column><el-table-column align="center" label="创建时间" prop="createtime" /><el-table-column align="center" label="成交时间" prop="bargain_time" /><el-table-column align="center" label="成交状态"><template #default="scope">{{ scope.row.is_bargain === 1 ? '未成交' : '已成交' }}</template></el-table-column><el-table-column align="center" label="编辑需求"><template #default="scope"><img v-if="scope.row.is_bargain == 1" alt="编辑" src="../../assets/edit_icon.png"style="cursor: pointer" @click="getNeedEdit(scope.row.id)"><span v-else>需求已成交不可修改</span></template></el-table-column><el-table-column align="center" label="添加报价"><template #default="scope"><el-icon color="red" size="25px"@click="get_quotation(scope.row.id, 0, scope.row.direction)"><CirclePlusFilled /></el-icon></template></el-table-column><el-table-column type="expand" width="140" label="查看报价"><template #default="scopes"><el-form label-position="right" inline class="demo-table-expand"><el-table :data="scopes.row.tea" borderstyle="width:calc(100% - 80px);float:right" id="child_tab"><el-table-column align="center" label="报价编号" prop="number"width="180" /><el-table-column align="center" label="计算老师" prop="teacher_name" /><el-table-column align="center" label="报价" prop="tea_money" /><el-table-column align="center" label="周期" prop="cycle" /><el-table-column align="center" flex label="报价单" width="140"><template #default="scope"><el-button :disabled="scope.row.amount_price == '0.00'"type="success">生成报价单</el-button></template></el-table-column><el-table-column align="center" label="修改报价"><template #default="scope"><el-button type="success"@click="get_quotation(scope.row.id, 1)":disabled="scopes.row.is_bargain == 2">修改报价</el-button></template></el-table-column></el-table></el-form></template></el-table-column>
</el-table>模拟数据
needDataFollow: [{"bargain_time": "","id": 7,"direction": "项目","demand_content": "777","report": [],"is_bargain": 1,"createtime": "2024-01-16","tea": [{"id": 6,"teacher_id": "555","teacher_name": "名字","cycle": "10","tea_money": "10.00","number": "PHAD-BJ-20240116-01"}]},
]修改默认样式
// 父表格颜色
/deep/.el-table th.el-table__cell {background: #596980 !important;font-size: 14px;font-weight: 400;color: #FFFFFF;
}
// 子表格颜色
#child_tab {/deep/ th {background-color: #f0f2fd !important;color: #000 !important;}
}// 展开向右边
/deep/ .el-table__expand-icon {color: #29b4ff;font-size: 15px;&::before {content: "展开";}.el-icon svg {transform: rotate(0deg);transition: 0.3s;}
}// 收起向下边
/deep/ .el-table__expand-icon--expanded {transform: rotate(0);&::before {content: "收起";}.el-icon svg {transform: rotate(90deg);transition: 0.3s;}
}