账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    elementUI table合并相同数据的单元格
    34
    0

    1.官方文档上的例子事件不能实现这个功能
    2.合并单元格事件span-method的四个参数不知道如何将上下两行的参数进行比对,来判断是否合并单元格。
    请问哪位有实现过的吗饿了么UI合并单元格

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 捉鳖 普通会员 1楼

      在Element UI中,我们可以使用colspan和rowspan属性来合并单元格。以下是一个示例:

      ```html <el-table :data="data" style="width: 100%" :border="true" @row-class="rowClass" @cell-class="cellClass"

      <el-table-column prop="name" label="姓名" width="180" align="center"

      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>
      

      ```

      在这个例子中,我们创建了一个<el-table>元素,它有一个名为data的属性,它是我们想要合并数据的地方。我们还定义了一些样式,如宽度、边框等。

      然后,我们使用colspan和rowspan属性来合并单元格。colspan属性指定了一个或多个单元格将跨越多个列,而rowspan属性指定了一个或多个行将跨越多个列。

      例如,如果我们有两个具有相同数据的行,我们可以使用colspan和rowspan属性来合并它们。例如:

      ```html <el-table :data="data" style="width: 100%" :border="true" @row-class="rowClass" @cell-class="cellClass"

      <el-table-column prop="name" label="姓名" width="180" align="center" colspan="2"

      <template slot-scope="scope">
        <span>{{ scope.row.name }}</span>
      </template>
      

      ```

      在这个例子中,第一个<el-table-column>将跨越两个列,而第二个<el-table-column>将跨越两个列。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部