前端数据处理 , 数据排序 , table 数据整理 ,el-table根据数据动态合并单元格

最新推荐文章于 2024-08-17 15:27:40 发布
最新推荐文章于 2024-08-17 15:27:40 发布
阅读量841 收藏 2
点赞数
分类专栏： web 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sandy_zhi/article/details/107360900
版权

最近被一个小小的前端数据处理脑子整的有点糊了，就是在大脑里整个的思路很简单，但是写完代码一跑确有问题，顿时陷入了思路和代码实现的对抗，改来改去最终是我总结的是对嵌套的for 循环不仔细分析是很容易出问题的。记录一下脑子糊了之后走不动的感受，教训是要慢下来，对自己的每一部分代码进行思路对应的检查。

第一版需求：

Select 病种选择，选择的数据在table 中进行展示，一类病种只能选择同一个医院，因此选择后的同类病种要放在一行中，数据展示按照选择的顺序展示，每一个病种可以单独删除。最终的效果图如下

实现思路，选择框选择的病种会选择到一个集合中，根据选择的集合，根据病种分类整理适合table 展示的数据，监听select控件的change时间，实现选择数据和下方table 的联动。每次change 都会按照当前的选择重新整合table 数据。

以上思路增加选择项的时候确实没有问题，按照选择的顺序 逆序删除也没有问题，但是选择框中的数据是按照选择顺序加入的，但是同类病种如果最先加入的被删除，change 时间触发后再整理table 数据，会导致table 原有数据上下行的交替，这种效果显然不符合正常的显示逻辑。

解决思路：

在整理table 数据之前，首先要把table 中已有的数据放在最前面，之后把新增的数据放在后面，再按照顺序整理table 数据

具体代码如下：

<template>
  <div class="containerbox">
    <el-select
      v-model="selectedDiseases"
      @change="changeDisease"
      value-key="diseaseNo"
      multiple
      collapse-tags
      style="margin-left: 20px;"
      placeholder="请选择申请病重"
      :multiple-limit="8"
      popper-class="sort_select"
    >
      <el-option v-for="item in allDisease" :key="item.diseaseNo" :label="item.diseaseName" :value="item"> </el-option>
    </el-select>

    <el-table :data="tableData" style="width: 100%" border center>
      <el-table-column label="选择申请病种" :min-width="180" align="center">
        <template slot-scope="scope">
          <!--  -->
          <span class="diseaseItem" v-for="item in scope.row.itemInfo" :key="item.diseaseNo"
            >{{ item.diseaseName }}
            <el-button type="text" class="el-icon-remove-outline" @click="removeDisease(item)"></el-button>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="fixhospitalName" label="选择医院" :min-width="180" align="center"> </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="chooseHospital(scope.row)">请选择医院</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import diseaseData from './disease.json'
export default {
  data() {
    return {
      tableData: [],
      allDisease: [],
      selectedDiseases: [],
      diseasesDto: []
    }
  },
  methods: {
    changeDisease(arr) {
      // 执行分组显示的问题
      // console.log(arr)
      // 根据当前选中的和之前选中的数据整合新的table 中应该展示的数据
      const tempTableData = this.tableData
      this.diseasesDto = []
      const oldDatas = []
      const newAdds = []
      this.tableData.forEach(row => {
        row.itemInfo.forEach(item => {
          oldDatas.push(item)
        })
      })
      // 先在新的选项中找到原来讯在的保留
      oldDatas.forEach(item => {
        const index = arr.findIndex(newItem => {
          return item.diseaseNo == newItem.diseaseNo
        })
        if (index != -1) {
          this.diseasesDto.push(item)
        }
      })
      // 把原来没加进去新增的加进入
      arr.forEach(item => {
        const index = this.diseasesDto.findIndex(inItem => {
          return inItem.diseaseNo == item.diseaseNo
        })
        if (index == -1) {
          this.diseasesDto.push(JSON.parse(JSON.stringify(item)))
        }
      })
      //从当前选中的病中深拷贝 1、如果已经是已经选择了医院的 保留医院 如果
      this.tableData = []
      this.diseasesDto.forEach(deepObj => {
        // 创建深拷贝的对象
        // const deepObj = JSON.parse(JSON.stringify(item))
        // 先判断tableData 中是否有这类数据 如果没有创建新的对象加入table data ，如果有的话在对应的itemInfo 中加入对应的item
        if (this.tableData.length == 0) {
          //还没加入过数据
          this.tableData.push({ fixhospitalName: deepObj.fixhospitalName, itemInfo: [deepObj] })
        } else {
          // 已经有数据 遍历里面的数据判断是否有这样的一类
          let inTable = false
          this.tableData.some(row => {
            //
            if (row.itemInfo[0].categoryNo == deepObj.categoryNo) {
              row.itemInfo.push(deepObj)
              inTable = true
            }
          })
          if (!inTable) {
            //如果没有在table 中 创建一个对象计入
            console.log('======')
            this.tableData.push({ fixhospitalName: deepObj.fixhospitalName, itemInfo: [deepObj] })
          }
        }
      })
      // console.log(this.tableData)
    },
    removeDisease(disease) {
      //删除选中集合中对应的数据
      const index = this.selectedDiseases.findIndex(item => {
        return item.diseaseNo == disease.diseaseNo
      })
      console.log(index)
      this.selectedDiseases.splice(index, 1)
      this.changeDisease(this.selectedDiseases)
      // this.tableData.some((item, rowIndex) => {
      //   const findedIndex = item.itemInfo.findIndex((ii, index) => {
      //     //判断如果有的话直接删除 删除后如果
      //     if (ii.diseaseNo == disease.diseaseNo) {
      //       item.itemInfo.splice(index, 1)
      //     }
      //     return ii.diseaseNo == disease.diseaseNo
      //   })
      //   if (findedIndex != -1) {
      //     // 判断删除后的row 是否还有信息
      //     if (item.itemInfo.length == 0) {
      //       this.tableData.splice(rowIndex, 1)
      //     }
      //     return true
      //   }
      // })
      // 删除table 中对应的数据
    }
  },
  mounted() {
    this.allDisease = diseaseData
    //生成模拟数据
    // const categoryNos = ['01', '02', '03', '04']
    // const categoryNames = ['精神类', '皮肤类', '结核类', '其他']
    // for (let i = 0; i < 20; i++) {
    //   const random = Math.floor(Math.random() * 4)
    //   const disease = {}
    //   disease.diseaseNo = '0' + i
    //   disease.diseaseName = '疾病' + i
    //   disease.categoryNo = categoryNos[random]
    //   disease.categoryName = categoryNames[random]
    //   this.allDisease.push(disease)
    // }
  }
}
</script>
<style lang="scss">
.containerbox {
  padding: 30px;
  text-align: center;
  .el-select {
    margin-top: 50px;
  }
  .el-table {
    margin-top: 200px;
  }
  .diseaseItem {
    margin-right: 20px;
    .el-button {
      color: red;
      // i {
      //   color: red;
      // }
    }
  }
}
</style>

需求改版：

需求刚写完的两天，因为要增加备足需求有变，改变后的需求涉及到单元格的合并单元格的需求，每个兵种占一行，增加备注列，其他操作和医院同一类的合并单元格，我的思路是，合并单元格仍然需要原来整理的tale 数据，因此保留，稍微改下页面渲染的数据结构，增加单元格合并的操作，效果图类似如下：

最终代码如下：

<template>
  <div class="containerbox">
    <el-select
      v-model="selectedDiseases"
      @change="changeDisease"
      value-key="diseaseNo"
      multiple
      collapse-tags
      style="margin-left: 20px;"
      placeholder="请选择申请病重"
      :multiple-limit="8"
      popper-class="sort_select"
    >
      <el-option v-for="item in allDisease" :key="item.diseaseNo" :label="item.diseaseName" :value="item"> </el-option>
    </el-select>

    <el-table :data="tableDataList" style="width: 100%" border center :span-method="tableSpanMethod">
      <el-table-column label="选择申请病种" :min-width="180" align="center">
        <template slot-scope="scope">
          <!--  -->
          <span class="diseaseItem" :key="scope.row.diseaseNo"
            >{{ scope.row.diseaseName }}
            <el-button type="text" class="el-icon-remove-outline" @click="removeDisease(scope.row)"></el-button>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="fixhospitalName" label="选择医院" :min-width="180" align="center"> </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="chooseHospital(scope.row)">请选择医院</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import diseaseData from './disease.json'
export default {
  data() {
    return {
      tableDataList :[],
      tableData: [],
      allDisease: [],
      selectedDiseases: [],
      diseasesDto: []
    }
  },
  methods: {
    changeDisease(arr) {
      // 执行分组显示的问题
      // console.log(arr)
      // 根据当前选中的和之前选中的数据整合新的table 中应该展示的数据
      // const tempTableData = this.tableData
      this.diseasesDto = []
      const oldDatas = []
      const newAdds = []
      // this.tableData.forEach(row => {
      //   row.itemInfo.forEach(item => {
      //     oldDatas.push(item)
      //   })
      // })
      // 先在新的选项中找到原来讯在的保留
      this.tableDataList.forEach(item => {
        const index = arr.findIndex(newItem => {
          return item.diseaseNo == newItem.diseaseNo
        })
        if (index != -1) {
          this.diseasesDto.push(item)
        }
      })
      // 把原来没加进去新增的加进入
      arr.forEach(item => {
        const index = this.diseasesDto.findIndex(inItem => {
          return inItem.diseaseNo == item.diseaseNo
        })
        if (index == -1) {
          this.diseasesDto.push(JSON.parse(JSON.stringify(item)))
        }
      })
      //从当前选中的病中深拷贝 1、如果已经是已经选择了医院的 保留医院 如果
      this.tableData = []
      this.diseasesDto.forEach(deepObj => {
        // 创建深拷贝的对象
        // const deepObj = JSON.parse(JSON.stringify(item))
        // 先判断tableData 中是否有这类数据 如果没有创建新的对象加入table data ，如果有的话在对应的itemInfo 中加入对应的item
        if (this.tableData.length == 0) {
          //还没加入过数据
          this.tableData.push({ fixhospitalName: deepObj.fixhospitalName, itemInfo: [deepObj] })
        } else {
          // 已经有数据 遍历里面的数据判断是否有这样的一类
          let inTable = false
          this.tableData.some(row => {
            //
            if (row.itemInfo[0].categoryNo == deepObj.categoryNo) {
              row.itemInfo.push(deepObj)
              inTable = true
            }
          })
          if (!inTable) {
            //如果没有在table 中 创建一个对象计入
            console.log('======')
            this.tableData.push({ fixhospitalName: deepObj.fixhospitalName, itemInfo: [deepObj] })
          }
        }
      })
      
      // 修改策略 需要单独按照顺序拿出来每一个数据 之后再合并单元格
      this.tableDataList = []
      this.tableData.forEach(row=>{
        row.itemInfo.forEach(item=>{
          this.tableDataList.push(item)
        })
      })

      // console.log(this.tableData)
    },
    removeDisease(disease) {
      //删除选中集合中对应的数据
      const index = this.selectedDiseases.findIndex(item => {
        return item.diseaseNo == disease.diseaseNo
      })
      console.log(index)
      this.selectedDiseases.splice(index, 1)
      this.changeDisease(this.selectedDiseases)
      // this.tableData.some((item, rowIndex) => {
      //   const findedIndex = item.itemInfo.findIndex((ii, index) => {
      //     //判断如果有的话直接删除 删除后如果
      //     if (ii.diseaseNo == disease.diseaseNo) {
      //       item.itemInfo.splice(index, 1)
      //     }
      //     return ii.diseaseNo == disease.diseaseNo
      //   })
      //   if (findedIndex != -1) {
      //     // 判断删除后的row 是否还有信息
      //     if (item.itemInfo.length == 0) {
      //       this.tableData.splice(rowIndex, 1)
      //     }
      //     return true
      //   }
      // })
      // 删除table 中对应的数据
    },
    tableSpanMethod({row,column,rowIndex,columnIndex}){
      //合并单元格
      let spanList = []
      this.tableData.forEach(row=>{
        spanList.push({spanLen:row.itemInfo.length,spanIndex:0})
      })
      // 需要合并单元格的列
      if(columnIndex==1||columnIndex==2){
        let spanStartIndex = 0;
        spanList.forEach(item=>{
          item.spanIndex = spanStartIndex
          spanStartIndex +=item.spanLen
        })
      let spaned = false
      for(let i = 0;i<spanList.length;i++){
        if(rowIndex === spanList[i].spanIndex){
          spaned = true
          return {
            rowspan:spanList[i].spanLen,
            colspan:1
          }
        }
      }
      }
    }
  },
  mounted() {
    this.allDisease = diseaseData
    //生成模拟数据
    // const categoryNos = ['01', '02', '03', '04']
    // const categoryNames = ['精神类', '皮肤类', '结核类', '其他']
    // for (let i = 0; i < 20; i++) {
    //   const random = Math.floor(Math.random() * 4)
    //   const disease = {}
    //   disease.diseaseNo = '0' + i
    //   disease.diseaseName = '疾病' + i
    //   disease.categoryNo = categoryNos[random]
    //   disease.categoryName = categoryNames[random]
    //   this.allDisease.push(disease)
    // }
  }
}
</script>
<style lang="scss">
.containerbox {
  padding: 30px;
  text-align: center;
  .el-select {
    margin-top: 50px;
  }
  .el-table {
    margin-top: 200px;
  }
  .diseaseItem {
    margin-right: 20px;
    .el-button {
      color: red;
      // i {
      //   color: red;
      // }
    }
  }
}
</style>

以上记录一次有印象的数据处理 github 完整代码在demo 中 sortDemo.vue 文件

代码地址 ：https://github.com/sandyzhi/mydemo

小智大愚
关注
专栏目录
element-ui table 动态合并单元格
qq_37237495的博客
11-05 2932
1.效果图如下： 2.html 代码： // html代码： <template> <div> <el-table border ref="table" :data="dataList" style="width: 100%" :span-method="objectSpanMethod" :header-cell-style="{bac...
el-table表格动态合并相同数据单元格(可指定列+自定义合并)
szzlh123456789的博客
08-01 618
el-table表格动态合并相同数据单元格(可指定列+自定义合并)_el-table 合并单元格动态-CSDN博客 vue2+elementUI表格实现实现多列动态合并_element table动态合并列-CSDN博客
el-table动态合并单元格 动态新增和动态删除
linwenbo1的博客
11-03 1807
el-table 动态合并单元格 动态新增和删除
Vxe UI vue vxe-table 实现表格数据分组功能，根据字段数据分组
我的博客
08-17 862
Vxe UI vue vxe-table 实现表格数据分组功能，根据字段数据分组基于树结构功能就可以直接实现数据分组功能
VUE element-ui之table表格勾选复选框动态合计某列的值
HanXiaoXi_yeal的博客
11-14 1730
实现步骤： 自定义数组对象合计方法： countTotal(arr, keyName) { let $total = 0 $total = arr.reduce(function(total, currentValue, currentIndex, arr) { return currentValue[keyName] ? (total + currentValue[keyName]) : total }, 0) return $total
el-table 动态合并单元格
st646889325的博客
05-16 240
通过findIndex与findLastIndex分别找到需要合并的数据开始位置与结束位置，再由结束位置 - 开始位置即可得出合并几行，列同理。由于原文动态合并单元格写的比较繁琐，这里将提供更简单的办法。
ElementUI中的el-table表格实现动态添加一行、删除一行、清空所有行
DZQ1223的博客
03-27 4048
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行。
el-table合并列 合并单元格
09-03
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
table数据相同合并单元格
12-30
table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan 【table数据相同时合并单元格，原理：逐行进行比较，相同时隐藏第二行，对第一行添加rowspan】
vue 中 elment-ui table合并上下两行相同数据单元格
12-29
<el header-cell-style={background: data=ptableDate align=center v-loading=loading height=tableHeight span-method=objectOneMethod > <el align=center prop=projName></el> <el-tab
el-table分组合并行
阿狸狸阿狸狸呀的博客
01-23 822
接到一个需求，把数据按照天 分组显示 时间单独一行，数据在一块。
【前端】实习随笔2 - 数据统计 - 商品维度订单统计
2301_78416672的博客
05-07 432
（10）数据过多，分页展示；每页100条；（11）统计：展示搜索的累计订单数，订单数为当前筛选条件下所有页面数据的总和（例如有10页数据显示的是10页的试听课订单数总和），并非当前1页的数据总和。一、页面实现。
学习记录：el-table合并单元格（动态增删改）
Blood97的博客
01-22 2142
注：可能代码不是那么优雅，但是能跑就行，简单记录一下，不要要求那么严格~~项目需要做一个评分表，涉及到单元格合并，就简单记录一下。该函数可以返回一个包含两个元素的数组，第一个元素代表。方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行。Element UI Table 表格。也可以返回一个键名为。
elementui——表格的相同内容单元格合拼
u013809856的博客
09-26 9445
如何实现相同内容的单元格合并？ :span-method="objectSpanMethod" 定义一个空数组：[] 定义一个变量：0 遍历数据如果有相同数据 在空数组添加一个0(相同数据的起始位加1)，不相同在数据push 一个1（变量改成当前索引） &lt;html&gt; &lt;el-table :data="tableData" :span-metho...
前端 | 数据统计及页面数据展现
知识库搭建ing
05-11 1282
找到所有TED打卡号的最大值，以得到TED文章的总篇数，然后统计单词总数以及高频词汇、中频词汇和低频词汇的数量，以及梳理频次最多的单词，并将统计信息应用到特定的div中。
实现el-table表格动态合并
liwei19950803的博客
03-15 805
如上图所示 我们要根据左侧三列进行每一列的相同名称合并，对每一行相同名称也进行一个合并，当时也在网上查找了一些案例 该图也是其中一个案例的数据，不过那是写死的需要一个一个去配置 如果数据过多就比较麻烦 ,下面是全部的代码 数据可以自己添加调试一下。在Vue项目中，我们经常使用的组件库就是element，但是根据一些夸张的需求我们可能要进行一些数据处理和组件的处理，对于el-table单元格的合并组件中也存在案例，但是那都是写死的 我们需要一个动态的合并。
vue el-table 动态添加行、删除行 动态验证添加行中表单的
weixin_45869649的博客
10-06 3383
vue el-table 动态添加行、删除行 需求：动态新增删除表格行，选择每一列的物料编码带出并展示 后面一串数据（物料名称、物料规格、单位等） 需要注意三个点： 1、动态增加行 2、动态验证行中表单值 3、怎么带出值 一、动态增加行代码 <el-dialog :title="title" :visible.sync="materialOpen" width="900px" append-to-body> <el-form :rules="rules" ref="a
element-ui Table动态合并与数据校验跟动态增加和减少数据功能
weixin_47970316的博客
04-28 1378
element-ui 表格动态合并数据，以及数据增加减少，数据检验重复性等
动态增加行列
俊人呀的博客
08-20 815
1211
el-table 前端排序 合并单元格
最新发布
10-26
`el-table` 是 Element UI 提供的一个表格组件，在前端开发中常用于展示数据列表。关于排序功能，`el-table` 自带了列级排序和行级排序能力。你可以通过设置表头的 `sortable` 属性为 `true`，然后设置 `sort-method` 函数来自定义排序规则。例如： ```html <el-table :data="tableData" :columns="columns"> <template slot="header" slot-scope="scope"> <el-table-column prop="name" label="姓名" sortable sort-method="customSortMethod"> </el-table-column> </template> </el-table> <script> methods: { customSortMethod(column, a, b) { // 这里可以根据 column.property 判断升序还是降序，并对 a 和 b 的值进行比较 } } </script> ``` 合并单元格则是通过 `rowspan` 和 `colspan` 属性来实现的。比如，如果你想将某个单元格跨越两行，可以在该单元格的属性中添加 `rowspan="2"`。同样，如果想跨列，可以添加 `colspan="2"`。 ```html <el-table-item :rowspan="2" >...</el-table-item> <el-table-item colspan="2" >...</el-table-item> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值