element-ui table表格。数组对应的一组数据占有两行怎么处理?

下面的评语是用来评价上面一行的。

data数据是这样的

tableData5: [{
          id: '12987122',
          zonename: '光明校区',
          subject: '语文',
          grade: '99',
          gradelevel: '88',
          gradehigh: '100',
          isadmission: '是',

          comment: '你真的很棒再接再厉吧',
        },{
          id: '12987122',
          zonename: '光明校区',
          subject: '数学',
          grade: '99',
          gradelevel: '88',
          gradehigh: '100',
          isadmission: '是',

          comment: '你真的很棒再接再厉吧',
        },

 

<el-table :data="tableData5" 
         <

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element-UITable组件中,如果需要将中相邻的同类项合并为行,可以使用自定义的合并行函数来实现。具体骤如下: 1. 首先,在Table组件中设置`row-span-method`属性为一个自定义的方法名,例如`mergeRows`。 2. 在Vue实例中定义`mergeRows`方法,该方法接收三个参数:当前行数据(row)、当前列数据(column)、当前行索引(rowIndex)。 3. 在`mergeRows`方法中,判断当前行与上一行是否需要合并。如果需要合并,则返回合并的行数(即rowspan),否则返回1。 4. 在模板中,使用`row-span-method`属性绑定到自定义的合并行函数。 下面是一个示例代码: ```html <template> <el-table :data="tableData" row-span-method="mergeRows"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="gender" label="性别"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, gender: '男' }, { name: '李四', age: 22, gender: '男' }, { name: '王五', age: 22, gender: '男' }, { name: '赵六', age: 25, gender: '女' }, { name: '钱七', age: 25, gender: '女' }, ], }; }, methods: { mergeRows(row, column, rowIndex) { if (rowIndex === 0) { return 1; // 第一行不需要合并 } const prevRow = this.tableData[rowIndex - 1]; if (row.age === prevRow.age && row.gender === prevRow.gender) { return 0; // 合并行数为0,表示与上一行合并 } return 1; // 不需要合并 }, }, }; </script> ``` 这样,相邻的同类项就会合并为一行显示在Table组件中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值