根据类名与列表返回table

本文介绍了一个通用的方法,用于根据输入的数据列表动态生成HTML表格。该方法可以智能地处理标题和内容,并能根据数值内容自动调整对齐方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

.qtipTable {
	margin: 0;
	padding: 0;
	font-size: 12px;
}
.qtipBody {
	border-right: 1px solid #b5daff;
	border-top: 1px solid #b5daff;
    font-family: 微软雅黑,宋体,tahoma, Arial, Verdana, sans-serif;
    font-size: 12px;
}
.qtipBody th {
	border-left: 1px solid #b5daff;
	border-bottom: 1px solid #b5daff;
	vertical-align: middle;
	background-color: #d0e8ff;
	text-align:center;
	width:100px;
}
.qtipBody td {
	border-left: 1px solid #b5daff;
	border-bottom: 1px solid #b5daff;
	color: black;
}
.money_right{
	text-align:right;
	padding-right:2px;
}

	/**
	 * 根据list 返回table
	 * @param titlenm 标题名称
	 * @param pType Class
	 * @param pList 结果集
	 * @param pFieldNames 列名
	 * 例如:makeHTMLTable("rsvmain.title.rsvoccudtl", Rsvoccudtl.class, rsvoccudtlList, "blockId","rmcnt")
	 * @return
	 */
	public <T> String makeHTMLTable(String titlenm, Class<T> pType, List<T> pList, String... pFieldNames)
			throws IllegalArgumentException, SecurityException, IllegalAccessException, InvocationTargetException,
			NoSuchMethodException {
		String wFuncnm, wResult = "<div style='margin-bottom: 5px;'><span style='font-size:14px;font-weight:bold;'>"
				+ ApplicationContextUtil.getMessage(titlenm)
				+ "</span></div><div class='qtipTable'><table class='qtipBody' cellspacing='0' border=0 width='100%'><tr>";
		//获得Class
		String wClassnm = pType.getName().substring(pType.getName().lastIndexOf(".") + 1);
		//遍历标题
		for (String fnm : pFieldNames) {
			wResult += "<th>" + ApplicationContextUtil.getMessage(wClassnm + "." + fnm) + "</th>";
		}
		wResult += "</tr>";
		Iterator<T> iterator = pList.iterator();
		while (iterator.hasNext()) {
			wResult += "<tr>";
			T t = (T) iterator.next();
			for (String fnm : pFieldNames) {
				wFuncnm = "get" + fnm.substring(0, 1).toUpperCase() + fnm.substring(1);
				String tmpString = pType.getMethod(wFuncnm).invoke(t).toString();
				//判断如果是数字,则右对齐
				if (tmpString.matches("^[-+]?(([0-9]+)([.]([0-9]+))?|([.]([0-9]+))?)$")) {
					wResult += "<td class='money_right'>" + tmpString + "</td>";
				} else {
					wResult += "<td>" + tmpString + "</td>";
				}
			}
			wResult += "</tr>";
		}
		wResult += "</table></div>";
		return wResult;
	}


### 动态合并单元格的实现 在 `el-table` 中,可以通过设置属性 `:span-method` 来定义单元格的合并逻辑。以下是基于后端返回数据动态合并单元格的具体实现方法。 #### 数据结构准备 假设后端返回的数据如下: ```json [ { name: '张三', age: 20, score: 85 }, { name: '李四', age: 20, score: 90 }, { name: '王五', age: 21, score: 75 } ] ``` 如果需要根据年龄字段进行合并,则可以先处理数据并计算出每一行的跨度信息。 --- #### 合并逻辑函数 通过自定义 `span-method` 方法来控制哪些单元格需要被合并。以下是一个完整的 Vue 实现示例: ```vue <template> <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod"> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> <el-table-column prop="score" label="分数"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, score: 85 }, { name: '李四', age: 20, score: 90 }, { name: '王五', age: 21, score: 75 } ], spanArr: [], // 存储每列的跨行数 pos: 0 // 当前位置索引 }; }, created() { this.getSpanArr(); }, methods: { getSpanArr() { const spans = []; let prevAge = null; let count = 1; this.tableData.forEach((item, index) => { if (prevAge === item.age && index !== 0) { count++; spans[index - 1][0] = 0; // 上一行隐藏 } else { if (index !== 0) { spans.push([count, 1]); // 记录当前行的跨行数 count = 1; } else { spans.push([1, 1]); } } prevAge = item.age; }); this.spanArr = spans; }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 1) { // 只针对第二列(年龄) const _row = this.spanArr[rowIndex][0]; const _col = this.spanArr[rowIndex][1]; if (_row > 0) { return { rowspan: _row, colspan: _col }; // 设置跨行和跨列 } else { return { rowspan: 0, colspan: 0 }; // 隐藏该单元格 } } return { rowspan: 1, colspan: 1 }; // 默认不合并其他列 } } }; </script> ``` --- #### 关键点解析 1. **数据预处理** 使用 `getSpanArr()` 函数遍历数据列表,记录每个相同值的连续次数,并将其存储到 `spanArr` 数组中[^1]。 2. **动态调整跨行列数** 在 `objectSpanMethod` 方法中判断当前列是否需要合并。如果是目标列(如本例中的“年龄”),则依据 `spanArr` 的值决定其跨行数;如果不是目标列,则保持默认状态[^2]。 3. **性能优化** 如果存在大量数据或复杂业务场景,建议提前缓存好跨行信息以减少重复计算开销[^3]。 --- #### 已知问题解决方案 当鼠标悬停时可能出现 hover 效果异常的情况。解决此问题的方法包括但不限于: - 自定义样式类名 (`cell-class-name`) 并手动绑定事件监听器。 - 利用 `cell-mouse-enter` 和 `cell-mouse-leave` 进一步增强交互体验。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值