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

设计图部分如下:
clipboard.png

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

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

clipboard.png

代码

    <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>

回答:

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

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

回答:

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

回答:

图片描述

图片描述

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

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

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

回答:

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

回答:

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

回答:

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

回答:

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

回答:

可以考虑一下单元格拆分在表格中列中写上 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”抵消。

回答:

table中使用colspan自行合并是可以实现的

回答:

有篇文章里面有element和原生两种实现方式,有需要可以参考下:https://segmentfault.com/a/11…

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注