当前位置：首页 > news >正文

buildadmin 自定义单元格渲染

news 来源：原创 2025/4/22 10:32:57

场景一：数据单列集中展示

例如，收购人信息有很多列，容易导致横向很长，所以需要到单列集中展示。

官方推荐使用slot渲染

在这里插入图片描述
代码示例：

// template中编写需要展示的插槽内容HTML
<template><Table ref="tableRef"><template #acquirerInfo><el-table-column label="收购人信息" :width="300"><template #default="scope"><div class="data-info"><p class="data-item">收购点：{{ scope.row['acquirer']['acquisition_name'] }}</p><p class="data-item">持卡人：{{ scope.row['acquirer']['username'] }}</p><p class="data-item">手机号：{{ scope.row['acquirer']['mobile'] }}</p><p class="data-item">身份证：{{ maskNumber(scope.row['acquirerRealname']['id_number']) }}</p></div></template></el-table-column></template><template #farmerInfo><el-table-column label="收款人信息" :width="300"><template #default="scope"><div class="data-info"><p class="data-item">收款人：{{ scope.row['farmer']['username'] }}</p><p class="data-item">身份证：{{ scope.row['acquirer']['username'] }}</p><p class="data-item">手机号：{{ scope.row['acquirer']['mobile'] }}</p><p class="data-item">身份证：{{ maskNumber(scope.row['acquirerRealname']['id_number']) }}</p><p class="data-item">银行卡：{{ maskNumber(scope.row['bank_no']) }}</p></div></template></el-table-column></template></Table>
</template>// column 字段中新增
{label: t('order.acquirer_info'),prop: 'acquirer.acquirer_info',align: 'center',operatorPlaceholder: t('Fuzzy query'),operator: false,width: 170,render: 'slot',slotName: 'acquirerInfo'
},// 样式设置 
<style scoped>
.data-info {font-family: 'Arial', sans-serif; /* 设置字体 */background-color: #f9f9f9; /* 背景色 */padding: 12px; /* 内边距 */border-radius: 6px; /* 边框圆角 */box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}.data-item {margin-bottom: 8px; /* 每行之间的间距 */color: #333; /* 文本颜色 */font-size: 14px; /* 字体大小 */
}.data-label {font-weight: bold; /* 标签字体加粗 */color: #0a74da; /* 标签字体颜色 */
}.data-info p:last-child {margin-bottom: 0; /* 最后一行不加底部间距 */
}.el-table .cell {padding: 0; /* 去掉单元格的默认间距 */
}.el-table-column {padding-left: 10px;padding-right: 10px;
}/* 鼠标悬停效果 */
.el-table__row:hover {background-color: #f0f8ff; /* 悬停背景色 */
}.el-table__cell {padding: 12px; /* 单元格内间距 */
}/* 为表格头部设置样式 */
.el-table th {background-color: #e6f7ff; /* 表头背景色 */font-weight: bold; /* 表头字体加粗 */color: #555; /* 表头文字颜色 */text-align: center; /* 表头文字居中 */
}
</style>