element-ui表格的行如何跨行合并？

设计图部分如下：

左边的一行对应右边的多行，请问这个要怎么实现呀

我用template写了，里面覆盖element-ui的一些样式，大概这样，也还不错

代码

    <el-table-column
    label="测试人员"
    width="140">
    label="测试要求">
    <template scope="scope">
    <div class="content-rowspan">
    <div v-for="value in scope.row.test">{{ value.tester }}</div>
    </div>
    </template>
    </el-table-column>
   <style>
    .content-rowspan div {
    padding-left: 13px;
    line-height: 46px;
    border-bottom: 1px solid #ECEDEE;
    }
    .content-rowspan div:last-child {
    border-bottom: 0;
    }
    </style>

vue.js element-ui

阅读 20.7k

11 个回答

stardew

✓ 已被采纳

el-table好像不能做出你要的效果，用table写吧。

还可以在最后两列用template写三行，但是可能视觉上不会那么美了。

ccfish

1.2k1827

发布于
2017-05-02

这个也不清楚，但是可以用[expand]达到近似的效果

张力中

111

发布于
2017-10-08

图片描述

我是这样实现的，但是仅仅实现了需求
利用elementUI的选取插件动态生成左侧为叉状结构的表格
可扩展性比较差，带来以下问题

。数据的存取就要用DOM了
。可扩展性较差，如果维度需要重新计算规则
。动态生成表格后，表格其他数据不会随动。（目前正在努力解决）

野生技术渣贡献一点自己的摸索，技浅嘴拙，望大佬多提点。

与国那岛

9864054

发布于
2017-05-17

行内合并有好的解决方法吗？

penta

发布于
2017-05-23

新手上路，请多包涵

楼主能分享一下这块儿代码吗?

牛头人丨酋长

503816

发布于
2017-07-04

遇到相同的需求了，烦的一匹

zhuzhu

发布于
2017-08-09

新手上路，请多包涵

楼主能分享这块代码吗？我也遇到这样的问题

阿木

发布于
2017-08-09

新手上路，请多包涵

可以考虑一下单元格拆分在表格中列中写上 inline-template 然后将一个单元格作为一个整体进行拆分
<el-table-column inline-template >
<template >

  <ul>
     <li></li>
     <li></li>
     <li></li>
  <ul>

</template>
</el-table-column>
然后通过给li加border－bottom的方式画出拆分的每一格，至于element自带的内容padding-left=“18px”;和padding-right=“18px”;可以使用margin-left="-18px",margin-right="-18px"抵消。