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>
相关推荐
知识分享小能手11 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
Hello.Reader15 小时前
优化 Flink 基于状态的 ETL少 Shuffle、不膨胀、可落地的工程
flink·php·etl
Q_Q51100828519 小时前
python+springboot+uniapp基于微信小程序的任务打卡系统
spring boot·python·django·flask·uni-app·node.js·php
ManThink Technology21 小时前
实用的LoRaWAN 应用层协议规范
开发语言·php
emma羊羊21 小时前
【文件读写】绕过验证下
网络安全·php·upload·文件读写
catchadmin21 小时前
如何在 PHP 升级不踩坑?学会通过阅读 RFC 提前预知版本变化
开发语言·后端·php
christine-rr1 天前
【25软考网工】第五章(11)【补充】网络互联设备
开发语言·网络·计算机网络·php·网络工程师·软考
linchare2 天前
mac下homebrew安装的多个php版本如何切换?
php·homebrew·mac切换php版本
没有bug.的程序员2 天前
分布式架构初识:为什么需要分布式
java·分布式·架构·php
半桔2 天前
【网络编程】套接字入门:网络字节序与套接字种类剖析
linux·网络·php·套接字