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>
相关推荐
心灵宝贝3 小时前
申威架构ky10安装php-7.2.10.rpm详细步骤(国产麒麟系统64位)
开发语言·php
梁辰兴6 小时前
企业培训笔记:外卖平台后端--套餐管理模块--新建套餐信息
笔记·vue·mybatis·springboot·外卖管理系统
YJlio6 小时前
Process Monitor 学习笔记(5.24):工具栏参考与高效快捷键指南
笔记·学习·php
stark张宇8 小时前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
Java陈序员8 小时前
免费开源!一款操作 MySQL 和 MariaDB 的 Web 界面工具!
mysql·docker·php·mariadb
两个人的幸福online9 小时前
php使用腾讯云服务
开发语言·php·腾讯云
Jayyih15 小时前
OSI七层模型和TCP/IP四层模型
网络·tcp/ip·php
黑金IT15 小时前
PHP 后台通过权限精制飞书多维表格
开发语言·php·飞书
大熊不是猫19 小时前
PHP实现企业微信 会话存档功能
开发语言·php·企业微信
第二层皮-合肥21 小时前
如何设置等长的最大走线长度
服务器·开发语言·php