二次封装el-table实现表体拆分合并功能

懂个锤子vue

已于 2022-07-15 23:00:20 修改

阅读量4.4k

点赞数 4

文章标签： elementui vue.js javascript

于 2022-02-09 21:29:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44372599/article/details/122849347

版权

本文介绍了如何在Vue.js项目中利用ElementUI的el-table组件，通过二次封装实现表格行的拆分和合并功能。具体需求包括：根据病理号前四位判断合并或拆分，样本类型删除后的病理号自动递增，以及动态调整操作按钮的可用性。解决方案包括：仅用label属性创建表头，插入原生table元素和tr遍历数据，以及在tr中嵌套el-table完成内容显示。

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

暂时还没找到相应资源所以记录下来。需求大概如下：

功能：添加样本信息判断是拆分还是合并并加入对应数组。病理号前四位相同可实现合并，合并一起的病理号后面可以递增拆分，样本类型删除后后面一条样本病理号自动递增+1，拆分或者合并后自动判断按钮是否可用

解决思路如下：

        <el-table :data="datab" border class="sampletableHead">
                    // dateb为一个空数组，没有实质作用 仅预防报错
          <el-table-column label="编号"></el-table-column>
          <el-table-column label="样本类型"></el-table-column>
          <el-table-column label="检查项目"></el-table-column>
          <el-table-column label="采取部位"></el-table-column>
          <el-table-column label="样本名称"></el-table-column>
          <el-table-column label="数量"></el-table-column>
          <el-table-column label="操作"></el-table-column>
        </el-table>

第一步这里的el-table-column只传入一个label属性做表头展示使用，不要传入prop，效果如下

        <table border="1" class="sampletableBody">
          <tr v-for="(item,index) in tableData" :key="index" colspan="6">
            <div class="pathologyNumber">
              <div>病理号：<span class="number">{
  { item.pathologyNo }}</span></div>
              <div class="splitMerge">
                <el-button type="text">拆分编号</el-button>
                <el-button t

最低0.47元/天解锁文章