关于vue项目中table表格动态纵向合并的问题
一、简介
我们公司框架主要用的是vue,没有用UI框架,比如我们要实现这种表格。
第一种做法(数据内容固定的情况)
可以在 td 里面加 p 来实现:
HTML
<tr v-for="lest of PageList">
<td>{
{lest.key.id}}</td>
<td width="186">
<p v-for="i of lest.list">{
{i.name}}</p>
</td>
<td>
<p v-for="i of lest.list">
{
{i.age}}
</p>
</td>
</tr>
CSS
th,
td {
height: 35px;
border: 1px solid rgb(194, 194, 194);
text-align: center;
vertical-align: middle;
padding: 0;
&:first-child {
border-left: 0;
}
&:last-child {
border-right: 0;
}
p {
border-bottom: 1px solid rgb(221, 219, 219);
padding: 7px;
margin: 0;
height: 35px;
}
}
这种做法比较简单,但是对数据内容固定,比较少的来说可以,如果数据比较多,那么表格不会根据内容自动撑开,所以会很麻烦。
第二种做法 (数据内容比较多,表格需要根据内容自动撑开)
这种做法需要处理后台返回的数据
JS
Manipulation() {
for (var field in this.list[0]) {
// 获取数据中的字段,也就是table中的column,只需要取其中一条记录的就可以了
// 定义数据list的index
var k = 0;
while (k < this.list.length) {
// 增加字段-用于统计有多少重复值
this.list[k][field + "span"] = 1;
// 增加字段-用于控制显示与隐藏
this.list[k][field + "dis"] = "";
for (var i = k + 1; i <= this.list.length - 1; i++) {
// 判断第k条数据的field字段,与下一条是否重复
if (
this.list[k][field] === this.list[i][field] &&
this.list[k][field] !== ""
) {
// 如果重复,第k条数据的字段统计+1
this.list[k][field + "span"]++;
// 设置为显示
this.list[k][field + "dis"] = "";
// 重复的记录,则设置为1,表示不跨行
this.list[i][field + "span"] = 1;
// 并且该字段设置为隐藏
this.list[i][field + "dis"] = "none";
} else {
break;
}
}
// 跳转到第i条数据的索引
k = i;
}
}
console.log(this.list);
HTML
<tr v-for="lest of list">
<td
width="100"
:rowspan="lest.idspan"
:style="{ display: lest.iddis }"
>
{
{ lest.id }}
</td>
<td>{
{ lest.name }}</td>
<td width="100">{
{ lest.age }}</td>
</tr>
第二种方法就比较好用,就是处理后台返回来的数据,整理有几个重复的字段,就是需要合并几行,然后把多余的隐藏掉就可以。
此提醒: 实现的这种方法主要是参考别人的 一个demo。