JS table内容转成二维数组,支持colspan和rowspan

思路:1.先初始化colspan的数据到数组2.根据rowspan和colspan计算th和td的矩阵二次填充数组说明:需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确 1 <!-- 演示数据部分 --> 2 <table id="expTable" class="table table_hover tabl...
摘要由CSDN通过智能技术生成

 

思路:
1.先初始化colspan的数据到数组
2.根据rowspan和colspan计算th和td的矩阵二次填充数组

 

说明:
需要引用到第三方库jQuery,table中的th和td行和列跨度必须正确

 

 1 <!-- 演示数据部分 -->
 2 <table id="expTable" class="table table_hover  table_border table_center">
 3     <tbody>
 4         <tr class="head">
 5             <th>客户</th>
 6             <th class="bb_header">期初余额</th>
 7             <th colspan="2">订单金额</th>
 8             <th>收款金额</th>
 9             <th>收款账户</th>
10             <th>客户余额</th>
11             <th>备注</th>
12         </tr>
13         <tr>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用 `el-table` 的 `span-method` 属性来实现二维数组拆分多行展示。具体步骤如下: 1. 定义一个 `spanMethod` 方法,用于计算每个单元格的 `rowspan` 和 `colspan` 值。该方法接收三个参数:`{ row, column, rowIndex, columnIndex }`,其中 `row` 和 `column` 表示当前单元格所在的行和列对象,`rowIndex` 和 `columnIndex` 表示当前单元格所在的行和列索引。 2. 在 `el-table` 组件上绑定 `span-method` 属性,将该属性的值设置为 `spanMethod` 方法。 3. 在 `spanMethod` 方法中,针对二维数组中的每个元素,计算该元素所在单元格的 `rowspan` 和 `colspan` 值,并返回一个包含 `rowspan` 和 `colspan` 值的对象,用于设置该单元格的 `rowspan` 和 `colspan` 属性。 下面是一个示例代码,供您参考: ``` <template> <el-table :data="arr" :span-method="spanMethod"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column label="地址"> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gendra" label="性别"></el-table-column> </el-table-column> </el-table> </template> <script> export default { data() { return { arr: [ { name: '张三', address: [{ age: 10, gendra: '男' }, { age: 10, gendra: '男' }] }, { name: '李四', address: [{ age: 20, gendra: '女' }, { age: 20, gendra: '女' }] }, ], }; }, methods: { spanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 计算 name 列的 rowspan 值 const rowspan = row.address.length; return { rowspan, colspan: 1 }; } else { // 计算 address 列的 rowspancolspan 值 return { rowspan: 1, colspan: 2 }; } }, }, }; </script> ``` 在上面的代码中,我们定义了一个二维数组 `arr`,其中每个元素都包含一个 `name` 属性和一个 `address` 属性,`address` 属性是一个包含多个对象的数组,每个对象包含 `age` 和 `gendra` 两个属性。我们使用 `el-table` 组件来展示这个二维数组,将 `name` 列和 `address` 列拆分成两行展示。具体实现方式就是在 `spanMethod` 方法中,针对每个单元格计算 `rowspan` 和 `colspan` 值,并返回一个包含这两个属性的对象,用于设置该单元格的 `rowspan` 和 `colspan` 属性。 注意:为了避免重复计算,我们只在 `name` 列的第一个单元格中设置了 `rowspan` 值,而在 `address` 列的所有单元格中都设置了 `colspan` 值。这样可以确保每个单元格的 `rowspan` 和 `colspan` 值都是唯一的,避免出现重复或错误的情况。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值