默认样式
修改后
样式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" border
style="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>
模拟数据文章来源:https://www.toymoban.com/news/detail-797065.html
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"
}
]
},
]
修改默认样式 文章来源地址https://www.toymoban.com/news/detail-797065.html
// 父表格颜色
/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;
}
}
到了这里,关于vue2使用 element表格展开功能渲染子表格的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!