Element-ui表格合并

最新推荐文章于 2023-08-17 09:45:59 发布
最新推荐文章于 2023-08-17 09:45:59 发布
阅读量451 收藏 2
点赞数 1
文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39246975/article/details/106929085
版权

Element-ui表格合并，并添加合计、小计功能

#最近Vue项目需要用到表格合并功能、合并小计和合并功能（用于数据的展示），所以进行记录一下，废话少说（本人也是小白），贴图一张（效果图）
在这里插入图片描述
首先是贴HTML页面的代码

<template>
  <div class="container">
    <el-table
    :data="dataT"
    border
    :span-method="arraySpanMethod"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      fixed
      prop="orderNumber"
      label="序号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="categories"
      label="分类"
      width="120">
    </el-table-column>
    <el-table-column
      prop="produceName"
      label="名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="referenceBrand"
      label="品牌"
      width="120">
      <template slot-scope="scope">
        <div v-show="!scope.row.isEdit">
          {{ scope.row.referenceBrand }}
        </div>
        <div v-show="scope.row.isEdit">
          <el-input size="small" v-model="scope.row.referenceBrand" placeholder="请输入参考品牌"
                    ></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column
    prop="eimac"
    label="型号"
    width="120">
    <template slot-scope="scope">
      <div v-show="!scope.row.isEdit">
        {{ scope.row.eimac }}
      </div>
      <div v-show="scope.row.isEdit">
        <el-input size="small" v-model="scope.row.eimac" placeholder="请输入参考类型"
                  ></el-input>
      </div>
    </template>
  </el-table-column>
  <el-table-column
    prop="measurement"
    label="单位"
    width="120">
  </el-table-column>
    <el-table-column
      prop="quantity"
      label="数量"
      width="120">
      <template slot-scope="scope">
        <div v-show="!scope.row.isEdit">
          {{ scope.row.quantity }}
        </div>
        <div v-show="scope.row.isEdit">
          <el-input size="small" v-model="scope.row.quantity" placeholder="请输入采购数量"
                    ></el-input>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="OriginRequestment"
      label="要求"
      width="120">
    </el-table-column>
    <el-table-column
      prop="spotRequirement"
      label="要求"
      width="120">
    </el-table-column>
    <el-table-column
    prop="originalWp"
    label="质保期（年）"
    width="120">
    <template slot-scope="scope">
      <div v-show="!scope.row.isEdit">
        {{ scope.row.originalWp }}
      </div>
      <div v-show="scope.row.isEdit">
        <el-input size="small" v-model="scope.row.originalWp" placeholder="请输入原厂质保期"
                  ></el-input>
      </div>
    </template>
  </el-table-column>
  <el-table-column
    prop="specifications"
    label="技术"
    width="120">
    <template slot-scope="scope">
      <div v-show="!scope.row.isEdit">
        {{ scope.row.specifications }}
      </div>
      <div v-show="scope.row.isEdit">
        <el-input size="small" v-model="scope.row.specifications" placeholder="请输入技术指标"
                  ></el-input>
      </div>
    </template>
  </el-table-column>
    <!-- <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
        @click.native.prevent="addButton(scope.$index, dataT)"
        type="text"
        size="small">
        添加
      </el-button>
        <el-button type="text" size="small" @click.native.prevent="editButton(scope.$index, dataT)">
          <template>
            <span v-show="!scope.row.isEdit">编辑</span>
            <span v-show="scope.row.isEdit">完成</span>
          </template>
        </el-button>
        <el-button
          @click.native.prevent="deleteRow(scope.$index, dataT)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column> -->
  </el-table>
    </div>
</template>

css代码

<style lang="css">
  .container{
    margin: auto;
    width: 71%;
  }
  .el-table td, .el-table th{
    text-align: center !important;
  }
</style>

接下来是方法的调用（表格合并的重点）

<script>
  let _self;
  export default {
    data() {
      return {
        spanArr:[],
        items:[],
        dataT:[],
        indexss:0,
        pos:0
      }
    },
    computed: {
      
    },
    created(){
      _self = this;
    },
    mounted(){
      _self.initDataForhttp();
    },
    methods: {
      initDataForhttp(){
        //封装后台数据
        let curItems=[
          {orderNumber:'1',categories:"电子",produceName:'显示',referenceBrand:'三星',eimac:'C32JG52QQC',measurement:'台',quantity:8,OriginRequestment:'国产',spotRequirement:'是',originalWp:"3",specifications:"",isEdit:false},
          {orderNumber:'1',categories:"电子",produceName:'显示',referenceBrand:'DELL',eimac:'U3219Q',measurement:'台',quantity:8,OriginRequestment:'国产',spotRequirement:'是',originalWp:"3",specifications:"",isEdit:false},
          {orderNumber:'1',categories:"电子",produceName:'显示',referenceBrand:'HP',eimac:'3219Q',measurement:'台',quantity:8,OriginRequestment:'国产',spotRequirement:'是',originalWp:"3",specifications:"",isEdit:false},
          {orderNumber:'2',categories:"办公",produceName:"打印纸",referenceBrand:"无",eimac:"无",measurement:'本',quantity:1000,OriginRequestment:'国产',spotRequirement:'是',originalWp:"无",specifications:"",isEdit:false},
          // {orderNumber:'3',categories:"办公设备",produceName:'小计:',referenceBrand:10000,eimac:10000,measurement:'002',quantity:8,OriginRequestment:'',spotRequirement:'',originalWp:3,specifications:"",isEdit:false},
          {orderNumber:'3',categories:"设备",produceName:'笔记',referenceBrand:"三星",eimac:"C32JG52QQC",measurement:'台',quantity:8,OriginRequestment:'国产',spotRequirement:"是",originalWp:"3",specifications:"",isEdit:false},
          {orderNumber:'3',categories:"设备",produceName:'笔记',referenceBrand:"DELL",eimac:"U3219Q",measurement:'台',quantity:8,OriginRequestment:'国产',spotRequirement:"是",originalWp:"3",specifications:"",isEdit:false},
          {orderNumber:'3',categories:"设备",produceName:'笔记',referenceBrand:"HP",eimac:"3219Q",measurement:'台',quantity:8,OriginRequestment:'国产',spotRequirement:"是",originalWp:"3",specifications:"",isEdit:false},
          {orderNumber:'4',categories:"电子",produceName:'显示',referenceBrand:'三星',eimac:'C32JG52QQC',measurement:'台',quantity:8,OriginRequestment:'国产',spotRequirement:'是',originalWp:"3",specifications:"",isEdit:false}
          // {orderNumber:'5',categories:"",produceName:'合计:',referenceBrand:10000,eimac:10000,measurement:'003',quantity:8,OriginRequestment:'',spotRequirement:'',originalWp:"3",specifications:""}
        ]
        _self.dataT = curItems;
      },
      arraySpanMethod({row, column, rowIndex, columnIndex}){
        const that = this;
        let num = 0;
        var key = column.property;
        var val =  that.dataT[rowIndex][key];
        var xuhao = that.dataT[rowIndex]['orderNumber'];
        for (let i in that.dataT) { //遍历items
          for (let j in that.dataT[i]) { //再遍历item的key
            if (j == 'orderNumber' || j == 'categories' || j == 'produceName' || j==="referenceBrand" || j==="measurement" || j==="quantity" 
            || j==="OriginRequestment" || j==="spotRequirement" || j==="originalWp" || j==="specifications") { //如果j等于这三者其中一个
              if (key === j && val === that.dataT[i][j]) { //再判断j是否等于key,并且val等于items里面的items[i][j]的值
                if (that.dataT[i][j] == '小计:' || that.dataT[i][j] == '合计:') { //如果等于则判断是否未小计、合计

                  return;//如果是，则不用合并列
                }
                  var index = that.dataT.findIndex(item=>{
                      return item[key] == val && item['orderNumber'] === xuhao;
                  })
                  if(rowIndex==index){
                    //证明是第一个,算出需要合并多少行
                    var numss = that.getNumForValue(key,val,xuhao);
                    return{
                      rowspan:numss,
                      colspan:1
                    }
                  }else{
                    //其他的隐藏
                    return{
                      rowspan:0,
                      colspan:0
                    }
                  }
              }
            }
          }
        }
      },
      //得到重复值的数量
      getNumForValue(key,val,xuhao){
        const that = this;
        let num = 0;
        for (let i in that.dataT) { //遍历items
          for (let j in that.dataT[i]) { //再遍历item的key
            if (j == 'orderNumber' || j == 'categories' || j == 'produceName' || j==="referenceBrand" || j==="measurement" || j==="quantity" 
            || j==="OriginRequestment" || j==="spotRequirement" || j==="originalWp" || j==="specifications") { //如果j等于这三者其中一个
              if (key === j && val === that.dataT[i][j] && xuhao===that.dataT[i]['orderNumber']) { //再判断j是否等于key,并且val等于items里面的items[i][j]的值
                if (that.dataT[i][j] == '小计:' || that.dataT[i][j] == '合计:') { //如果等于则判断是否未小计、合计
                  console.log(val+"："+num)
                  return 0;//如果是，则不用合并列
                }
                num++;//如果不是。则合并，合并数加1
              }
            }
          }
        }
        return num;
      },
      rowSpanF: function (key, val) {
        console.log(val);
        const that = this;
        let num = 0;
        for (let i in that.items) { //遍历items
          for (let j in that.items[i]) { //再遍历item的key
            if (j == 'feeName' || j == 'projectName' || j == 'produceName') { //如果j等于这三者其中一个
              if (key === j && val === that.items[i][j]) { //再判断j是否等于key,并且val等于items里面的items[i][j]的值
                if (that.items[i][j] == '小计:' || that.items[i][j] == '合计:') { //如果等于则判断是否未小计、合计
                  console.log(val+"："+num)
                  return//如果是，则不用合并列
                }
                num++;//如果不是。则合并，合并数加1
              }
            }
          }
        }
        // console.log(val+"："+num);
        if(num==0){//如果为o，则为一列
            return 1
        }
        return num;
      },
      // deleteRow(index, rows) {
      //   this.dataT.splice(index, 1);
      //   // this.dataT.splice(index,1);
      //   this.$forceUpdate(); 
      // },
      // editButton(index, rows){
      //   this.dataT[index].isEdit = !this.dataT[index].isEdit;
      //   console.log(this.dataT[index].isEdit)
      // },
      // addButton(index, rows){
      //   var obj={
      //       "orderNumber":  this.dataT[index].orderNumber,
      //       "categories":  this.dataT[index].categories,
      //       "produceName":  this.dataT[index].produceName,
      //       "referenceBrand":  "",
      //       "eimac":  "",
      //       "measurement":  this.dataT[index].measurement,
      //       "quantity":  this.dataT[index].quantity,
      //       "OriginRequestment":  this.dataT[index].OriginRequestment,
      //       "spotRequirement":  this.dataT[index].spotRequirement,
      //       "originalWp": this.dataT[index].originalWp,
      //       "specifications": this.dataT[index].specifications,
      //       "isEdit": true
      //   }
      //   this.dataT.splice(index+1,0,obj);
      // },
      handleSelectionChange(val) {
        this.dataT = val;
        // console.log("大风呼呼uuu");
      }
    }
  }
</script>

解释
代码已经全部贴出来了，注释的是动态增加、删除、编辑功能，不过由于项目暂时用不到，所以注释掉，接下来解释一下方法的调用：

  1. 数据的格式的加载，调用initDataForhttp（）方法进行数据获取（如果你是拿后台的数据进行显示，可以在此方法进行请求，然后把数据封装成为上面的格式）
  2. 单元格的合并（重点），首先是调用 :span-method=“arraySpanMethod”，arraySpanMethod（）方法里面就是单元格合并，首先我的思路是，先判断表格的数据是否在同一个序号里面是否拥有相同的值。如果拥有，则算出来它拥有多少个相同的值，则判断是否是第一个（使用数组的findIndex方法得到下标，判断行id是否跟下标相同，如果相同则为第一个，否则不是（需要将该表格列进行隐藏）），如果没有则不用管
深圳程序员打工崽
关注
element-ui表格合并
代码青春
11-02 133
/**表格合并行 */ arraySpanMethod({ row, column, rowIndex, columnIndex }){ let that = this; if (columnIndex === that.applysList.length-1) { return [1, 3]; } }, ------------------------------------------ <el-table ...
element-ui 表格合并
qq_45915537的博客
09-04 728
elementUI 表格合并 elementUI官方文档的表格合并方法为 span-method // Table 组件 绑定 span-method <Table :data="tableData" :span-method="cellMerge" > data(){ return { spanArr: [], pos: 0, tableData:[ {game_id: 2,game_name: "王者荣耀", scene_id: "2
Vue+Element UI el-table合并表格相同值行合并
liuchao的博客
03-02 2624
Vue+Element UI el-table合并表格相同值行合并代码实现 代码实现 <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 0"> <el-table-column prop="id" label="ID" width="100px"> </el-table-column&
论element-ui表格的合并行和列（巨细节）
热门推荐
小邹的博客
03-15 1万+
​ 作为一个后端来写前端属实是痛苦、讲真的、刚开始我是真不想用饿了么的这个合并行和列、因为太语焉不详了、看着头疼、后来发现好像我没得选、只好硬着头皮上了。
elementui合并表格
在数字时代,软件的名字就是脆弱,代码会随着时间流逝而烂掉
11-25 310
// 头部合并 arraySpanMethod ({ row, column, rowIndex, columnIndex }) { let data = this.dataList let cellValue = row[column.property] if (cellValue) { // 上一条数据 let prevRow = data[rowIndex - 1] // 下一条数据 let n
element-ui表格合并span-method的实现方法
10-16
总的来说，`span-method`提供了极大的灵活性，使得我们可以根据需求自由地控制Element-UI表格中的单元格合并，从而更好地展示和组织数据。在编写这个方法时，我们需要充分理解业务逻辑，并结合实际数据来确定合并...
element-ui表格el-table动态合并单元格（合并行和列）以及给表头添加斜线
01-11
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
element-ui版本号2.15.12的包
最新发布
12-28
总的来说，Element UI版本2.15.12的包着重解决了`el-table`组件在表格合并和hover样式方面的痛点，提高了用户体验。这个更新不仅体现了Element UI团队对细节的关注，也展示了他们致力于提供更稳定、更易用的前端解决...
elementUI表格合并
yingw1的博客
03-13 359
这种方式只能比较已经排好序的数组，如第一张图，第一行和最后一行的名称是一样的但是没有合并，是因为，上面的代码。
element-ui表格单元格合并
csychencsy的博客
06-13 1474
使用的是element中的 :span-method="objectSpanMethod"其中 rowspan() 方法是筛选出需要合并的单元格。需求是把每一列数据中相同的bom.id合并。
elementUI table表格动态合并的示例代码
10-17
主要介绍了elementUI table表格动态合并的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementui的table合并单元格
weixin_72915158的博客
08-17 1717
当我们项目中多个页面都需要用到合并相同字段。一个页面一个页面的写太过于繁琐，所以封装了公共js：合并单元格提示：以下是本篇文章正文内容，下面案例可供参考以上就是今天要讲的内容，本文仅仅简单介绍了公共js封装以及使用合并单元格。
elementUI的table合并
q140948940的博客
04-08 1237
关于table的合并，官方给的案例及其简单，所以当项目遇到此类问题，踩坑是无法避免的，其合并原理类似html的table合并。
elementUi表格合并
m0_59955777的博客
04-28 533
<template> <div class="content-body"> <div style=" height: calc(100% - 30px); border-radius: 8px; box-sizing: border-box; overflow: hidden; " > <el-table :...
element-ui中Table表格合并单元格
qq_41078029的博客
02-19 1443
&lt;template&gt; &lt;div&gt; &lt;el-table :data="tableData" border :span-method="arraySpanMethod" style="width: 100%" &gt; &lt;el-table-column prop="id&
elementUI表格合并行数据
记性不好，写作只为记录，下次直接搬。
08-15 3809
elementUI表格合并行数据
Element 表格单元格合并
阿臻
10-10 285
【代码】Element 表格单元格合并。
element ui 的table单元格合并
weixin_46103180的博客
04-12 1万+
elementUI的table表格实现单元格合并
vuejs和elementui表格合并
weixin_48360218的博客
08-06 211
methods: { mergeTableRow(data, merge) { if (!merge || merge.length === 0) { return data; } merge.forEach(m => { const mList = {}; data = data.map((v, index) => { const rowVal = v[m]; if (mList[rowVal] && mList[rowVal].newIndex === index) { mL
Element-UI表格动态合并行
03-01
Element-UI表格动态合并行的常用方法是使用span-method属性，该属性接受一个回调函数，该回调函数的参数为当前行的列数据，返回值为行合并的数量，可以根据当前行的列数据来判断是否需要合并当前行。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

深圳程序员打工崽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值