如何实现一对多的表格结构？

  • Z时代
  • 2024-02-28
  • 分类：IT

原实现方式：

<div class="tbody">
      <el-row v-for="arrObjContent in datalist " :key="arrObjContent.label" class="table-col">
        <el-col v-for="(objValue, key, index2) of  arrObjContent" :key="index2" class="table-item"
          style="margin: 0 auto;">
          <span :class="getCellClass(key)" class="cell" style="height: 23px;line-height: 23px;">{{ objValue }}</span>
        </el-col>
      </el-row>
    </div>

如图，数据结构是一对一的，但是很多键是重复的，希望能够只有一个键，值都排到对应键后，表格就不是一列表头，对应一列数据了，而是一列表头对应多列数据
如何实现一对多的表格结构？

回答：

用这个组件:

https://www.npmjs.com/package/vxe-table
https://vxetable.cn/v4/#/table/start/install

回答：

你用的 element-ui 表格是有这个功能的
https://element.eleme.cn/#/zh-CN/component/table#he-bing-xing-huo-lie

回答：

使用element-ui的这个
https://element.eleme.cn/#/zh-CN/component/table#table-column...
和vxe-table都可以，vxe-table有虚拟滚动
https://vxetable.cn/v4/#/table/advanced/mergeCell

以上是 如何实现一对多的表格结构？ 的全部内容， 来源链接： utcz.com/p/934940.html

回到顶部