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

懂个锤子vue

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

阅读量4.2k

点赞数 4

文章标签： elementui vue.js javascript

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

本文链接：https://blog.csdn.net/qq_44372599/article/details/122849347

版权

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

功能：添加样本信息判断是拆分还是合并并加入对应数组。病理号前四位相同可实现合并，合并一起的病理号后面可以递增拆分，样本类型删除后后面一条样本病理号自动递增+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