Vue中HTML的table标签表格合并
程序员文章站
2022-04-19 20:25:51
...
<div id="app">
<!--
需求: 规格商品: 同一种商品可能有不同规格,需要将规格商品的'运费'和'名称'列在行方向上合并
-->
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>商品名称</th>
<th>商品编号</th>
<th>商品规格</th>
<th>商品单价</th>
<th>商品数量</th>
<th>运费</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in productList" :key="index">
<td v-if="spanArr[index]" :rowspan="spanArr[index]" :colspan="1">{{item.name}}</td>
<td>{{item.code}}</td>
<td>{{item.attrs}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td v-if="spanArr[index]" :rowspan="spanArr[index]" :colspan="1">{{item.freight}}</td>
</tr>
</tbody>
</table>
</div>
<script>
let vue = new Vue({
el:'#app',
data() {
return {
productList:[],
spanArr: [], //记录当前单元格向下合并的行数,为0的话说明该单元格在行方向上已被合并不用显示
pos: 0 // 记录当前单元格所处的行下标
}
},
methods: {
// 初始化商品数据
init() {
this.productList = [
{
id: '0001',
code: 'X10001',
name:'葡萄',
attrs:'红色;500g',
price: 50,
num: 1,
freight: 15
},
{
id: '0001',
code: 'X10002',
name:'葡萄',
attrs:'绿色;500g',
price: 30,
num: 1,
freight: 15
},
{
id: '0001',
code: 'X10003',
name:'葡萄',
attrs:'白色;500g',
price: 30,
num: 1,
freight: 15
},
{
id: '0002',
code: 'X20001',
name:'芒果',
attrs:'黄色;500g',
price: 50,
num: 1,
freight: 15
}
]
this.getRows()
},
// 初始化需要合并的数据数组,计算合并后需要展示的行数
// 以数组中每条数据的商品id来判断,如果商品id相同说明是同一种商品的不同规格,则需要合并
getRows() {
let list = this.productList;
list.forEach((ele,i)=>{
if(i===0) {
// 第一行,一定展示不需要合并
this.spanArr.push(1)
this.pos = 0;
}else {
// 非第一行
if(ele.id === list[i-1].id) {
// 当前行的id和上一行的id相同了,则当前行需要和上一行的进行合并,当前行的该单元格不显示
this.spanArr[this.pos] +=1 //需要向下合并的行数加1
this.spanArr.push(0)
}else {
this.spanArr.push(1)
this.pos = i
}
}
})
console.log('合并的数据',this.spanArr);
}
},
created() {
this.init()
},
})
</script>
合并后的表格效果如下图所示:
下一篇: 微信小程序webview内嵌h5页面
推荐阅读
-
html中关于table以及form表单标签的详解
-
html中的table标签制作表格
-
用v-html解决Vue.js渲染中html标签不被解析的问题
-
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
-
element-ui中Table表格省市区合并单元格的方法实现
-
vue使用element-ui中的table表格,实现某一列的文字超出规定字符显示省略号
-
HTML中table标签的thead、tbody、tfoot的作用详解
-
[HTML]表格标签table的使用(基本语法、属性、单元格合并)
-
用v-html解决Vue.js渲染中html标签不被解析的问题
-
基于layui中table组件的数据表格单元格合并