buildadmin 自定义单元格渲染

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

例如，收购人信息有很多列，容易导致横向很长，所以需要到单列集中展示。
官方推荐使用slot渲染
代码示例：
php 复制代码
// 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>