vxe-table表格合并单元格和编辑

huxihua2006

已于 2023-09-13 10:13:09 修改

阅读量5.7k

点赞数 2

文章标签：前端 vue.js

于 2022-11-18 17:24:53 首次发布

本文链接：https://blog.youkuaiyun.com/huxihua2006/article/details/127926603

版权

该博客介绍了如何在Vue.js应用中利用vxe-table插件来实现表格的单元格合并及编辑功能。通过设置`mergeCells`和`tableData`在初始化数据中完成单元格合并，同时利用`footerMethod`和`merge-footer-items`属性处理尾部数据和合并尾部单元格。详细教程可参考vxe-table官方文档：https://vxetable.cn/#/table/advanced/footerSpan。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
//这是在vue上面引用vxe-table插件实现的，主要方法都设置在table中，mergeCells，tableData都是在vue页面的data初使化数据， :footer-method=“footerMethod”：尾部数据，:merge-footer-items=“mergeCells”：尾部合并单元格。vxe-table网址：https://vxetable.cn/#/table/advanced/footerSpan


  <vxe-table
      :data="tableData"
      empty-text="暂无数据！"
      border
      :column-config="{ resizable: true }"
      :edit-config="{ trigger: 'click', mode: 'cell' }" //编辑单元格
      :row-config="{
        isCurrent: true,
        isHover: true,
        height: 30,
      }"
      show-overflow
      stripe
      :footer-method="footerMethod" //表尾方法
      class="mytablevxe"
      show-footer
      :merge-footer-items="mergeCells" //表尾合并单元格
      footer-align="center"
      :header-cell-style="{ color: '#000' }"
      style="border-collapse: collapse;min-height: 65vh;"
    >
      <!-- <vxe-table-column type="seq" title="序号" width="50"></vxe-table-column> -->
      <vxe-table-column field="name" title="姓名"> </vxe-table-column>

      <vxe-colgroup title="裤子">
        <vxe-table-column field="item1s" title="奖"></vxe-table-column>
        <vxe-table-column field="item2s" title="罚"></vxe-table-column>
      </vxe-colgroup>
      <vxe-colgroup title="连带">
        <vxe-table-column field="item3s" title="奖"></vxe-table-column>
        <vxe-table-column field="item4s" title="罚"></vxe-table-column>
      </vxe-colgroup>
     <vxe-colgroup title="抖音码奖罚">    //奖罚点击输入框填写

最低0.47元/天解锁文章