不叨叨,上码:
<el-table
ref="table"
:data="tableData"
:row-class-name="getRowClassName"
:header-cell-style="{ background: '#f5f5f7' }"
>
<el-table-column type="expand">
<template slot-scope="props">
<el-table
class="inline-table"
:data="props.row.children"
style="width: 100%; background: none"
>
<el-table-column width="100"></el-table-column>
<el-table-column
label="**名称"
prop="mc"
show-overflow-tooltip
>
<template slot-scope="{ row }">
<span style="color: #20a675" v-if="row.mc">{{
row.mc
}}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column
label="**风险"
prop="xkzfx"
show-overflow-tooltip
>
<template slot-scope="{ row }">
<span>{{ row.xkzfx || '-' }}</span>
</template>
</el-table-column>
<el-table-column
label="扫描时间"
prop="smsj"
show-overflow-tooltip
>
<template slot-scope="{ row }">
<span>{{ row.smsj || '-' }}</span>
</template>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column label="**名称" prop="mc" show-overflow-tooltip>
<template slot-scope="{ row }">
<span style="color: #20a675" v-if="row.mc">{{ row.mc }}</span>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="**说明" prop="sm" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.sm || '-' }}</span>
</template></el-table-column
>
<el-table-column label="**语言" prop="yy" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.yy || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="**版本" prop="bb" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.bb || '-' }}</span>
</template></el-table-column
>
<el-table-column label="安全风险" prop="aqfx" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>-</span>
</template></el-table-column
>
<el-table-column label="操作风险" prop="czfx" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.czfx || '-' }}</span>
</template></el-table-column
>
<el-table-column label="***数" prop="ms" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.ms || '-' }}</span>
</template></el-table-column
>
<el-table-column label="审批状态" prop="spzt" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.spzt || '-' }}</span>
</template></el-table-column
>
<el-table-column label="提交活动" prop="tjhd" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.tjhd || '-' }}</span>
</template></el-table-column
>
<el-table-column label="发布日期" prop="fbrq" show-overflow-tooltip>
<template slot-scope="{ row }">
<span>{{ row.fbrq || '-' }}</span>
</template></el-table-column
>
</el-table>
getRowClassName({ row, rowIndex }) {
if (!row.children) {
return 'row-expand-cover'
} else if (!row.children.length) {
return 'row-expand-cover'
}
},
/deep/ .row-expand-cover .el-table__expand-icon {
visibility: hidden !important;
}
.table {
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
/deep/ .el-table__header tr,
.el-table__header th {
padding: 0;
height: 44px;
}
/deep/ table .el-table__cell {
padding: 6px 0;
}
.inline-table {
/deep/ table td {
border-bottom: none !important;
}
}
.el-tag {
color: #fff;
}
}