vue.js - 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>

解决方案

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

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

这篇关于vue.js - element-ui表格的行如何跨行合并？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！