vue-table实现相同项合并,跨行跨列计算

最新推荐文章于 2024-03-14 20:29:43 发布
最新推荐文章于 2024-03-14 20:29:43 发布
阅读量860 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45408578/article/details/132826041
版权

在这里插入图片描述

1.使用vxeTable

<template>
  <div>
    <vxe-table border resizable:true :scroll-y="{ enabled: false }" :span-method="mergeRowMethod" :data="tableData">
      <vxe-column field="mineralName" title="矿产名称(矿产组合)"></vxe-column>
      <vxe-column field="unitNmae" title="统计对急及资源储量单位"></vxe-column>
      <vxe-column field="brand" title="矿石工业类型及品级(牌号)"></vxe-column>
      <vxe-column field="quality" title="矿石主要成分及质量指标"><template slot-scope="scope">
          <span v-if="scope.row.wbsName == ''">
            <p>自己定义的值</p>
          </span>
          <span v-if="scope.row.wbsName !== ''">
            <p>{{ scope.row.wbsName }}</p>
          </span>
        </template></vxe-column>
      <vxe-colgroup title="截止2022年底查明资源储量及年度变化情况" align="center">
        <vxe-column field="typeEncoding" title="类型编码" align="center"></vxe-column>
        <vxe-column field="earlyTenure" title="年初保有" align="center"></vxe-column>
        <vxe-column field="yearAccumulation" title="年初累计" align="center"></vxe-column>
        <vxe-column field="expNumber" title="开采量" align="center"></vxe-column>
        <vxe-column field="amountOfLoss" title="损失量" align="center"></vxe-column>
        <vxe-column field="survey" title="勘查增减" align="center"></vxe-column>
        <vxe-column field="rollBack" title="重算增减" align="center"></vxe-column>
        <vxe-column field="amountOfOverlay" title="审批压覆量" align="center"></vxe-column>
        <vxe-column field="other" title="其他" align="center"></vxe-column>
        <vxe-column field="yearEndTenure" title="年末保有" align="center"></vxe-column>
        <vxe-column field="cumulative" title="累计查明" align="center"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          mineralName: "铅矿(共生矿产)312321",
          unitNmae: "铅吨矿石千吨",
          brand: "硫化锌矿石、混合锌矿石不分品级",
          quality: "P6 0.",
          typeEncoding: "探明资源量",
          yearAccumulation: "2833/245.69",
          earlyTenure: "",
          expNumber: "",
          amountOfLoss: "",
          survey: "",
          rollBack: "",
          amountOfOverlay: "",
          other: "",
          yearEndTenure: "",
          cumulative: ""
        },
        {
          mineralName: "铅矿(共生矿产)",
          unitNmae: "铅吨矿石千吨11",
          brand: "硫化铅矿石不分品级",
          quality: "P6 0.907 96",
          typeEncoding: "探明资源量",
          yearAccumulation: "2833/245.69",
          earlyTenure: "",
          expNumber: "",
          amountOfLoss: "",
          survey: "",
          rollBack: "",
          amountOfOverlay: "",
          other: "",
          yearEndTenure: "",
          cumulative: ""
        },
      ],
      keys: []
    };
  },
  created() {
    this.allProp();
  },
  methods: {
    //获取所有需要合并的属性
    allProp() {
      console.log(this.keys);
    },
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = ["mineralName", "unitNmae", "brand", "quality"];
      console.log('row, _rowIndex, column, visibleData ',row, _rowIndex, column, visibleData );
      const cellValue = row[column.property];
      for (let j = 0; j < fields.length; j++) {
        if (cellValue && fields[j].includes(column.property)) {
          const prevRow = visibleData[_rowIndex - 1];
          let nextRow = visibleData[_rowIndex + 1];
          if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 };
          } else {
            let countRowspan = 1;
            while (nextRow && nextRow[column.property] === cellValue) {
              nextRow = visibleData[++countRowspan + _rowIndex];
            }
            if (countRowspan > 1) {
              return { rowspan: countRowspan, colspan: 1 };
            }
          }
        }
      }
    }
  }
};
</script>
<style></style>

2.原生实现

<template>
  <div class="hello">
    <table class="table">
      <thead>
        <tr v-for="(items, i) in newArr" :key="i">
          <th
            v-for="(item, j) in items"
            :key="j"
            :rowspan="item.rowspan"
            :colspan="item.colspan"
          >
            {{ item.title }}
          </th>
        </tr>
      </thead>
      <tbody v-if="dataList">
        <tr v-for="(items, index) in dataList" :key="index">
          <td
            v-for="(item, i) in items.tdList"
            :key="i"
            :rowspan="resetRowSpan(index, item)"
          >
            {{ items[item] }}
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr v-for="(items, index) in dataList" :key="index">
          <td v-for="(item, j) in colKeyList" :key="j">{{ items[item] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data() {
    return {
      columns: [
        {
          title: "矿产名称(矿产组合)",
          key: "mineralName",
          hasrowspan: true
        },
        {
          title: "统计对急及资源储量单位",
          key: "unitNmae",
          hasrowspan: true
        },
        {
          title: "矿石工业类型及品级(牌号)",
          key: "brand",
          hasrowspan: true
        },
        {
          title: "矿石主要成分及质量指标",
          key: "quality",
          hasrowspan: true
        },
        {
          title: "截止2022年底查明资源储量及年度变化情况",
          children: [
            {
              title: "类型编码",
              key: "typeEncoding",
              align: "center"
            },
            {
              title: "年初保有",
              key: "earlyTenure",
              align: "center"
            },
            {
              title: "年初累计",
              key: "yearAccumulation",
              align: "center"
            },
            {
              title: "开采量",
              key: "expNumber",
              align: "center"
            },
            {
              title: "损失量",
              key: "amountOfLoss",
              align: "center"
            },
            {
              title: "勘查增减",
              key: "survey",
              align: "center"
            },
            {
              title: "重算增减",
              key: "rollBack",
              align: "center"
            },
            {
              title: "审批压覆量",
              key: "amountOfOverlay",
              align: "center"
            },
            {
              title: "其他",
              key: "other",
              align: "center"
            },
            {
              title: "年末保有",
              key: "yearEndTenure",
              align: "center"
            },
            {
              title: "累计查明",
              key: "cumulative",
              align: "center"
            }
          ]
        }
      ], //表头原始参数
      newArr: [[]], //表头
      maxHeight: 1, //表头总共占的行数
      colKeyList: [], //所有的key
      dataList: [
        {
          mineralName: "铅矿(共生矿产)",
          unitNmae: "铅吨矿石千吨",
          brand: "硫化铅矿石不分品级",
          quality: "P6 0.907 96",
          typeEncoding: "探明资源量",
          yearAccumulation: "2833/245.69",
          earlyTenure: "",
          expNumber: "",
          amountOfLoss: "",
          survey: "",
          rollBack: "",
          amountOfOverlay: "",
          other: "",
          yearEndTenure: "",
          cumulative: ""
        },
        {
          mineralName: "铅矿(共生矿产)",
          unitNmae: "铅吨矿石千吨",
          brand: "硫化铅矿石不分品级",
          quality: "P6 0.907 96",
          typeEncoding: "推断资源量",
          yearAccumulation: "2833/245.69",
          earlyTenure: "",
          expNumber: "",
          amountOfLoss: "",
          survey: "",
          rollBack: "",
          amountOfOverlay: "",
          other: "",
          yearEndTenure: "",
          cumulative: ""
        },
        {
          mineralName: "铅矿(共生矿产)",
          unitNmae: "铅吨矿石千吨",
          brand: "硫化锌矿石、混合锌矿石不分品级",
          quality: "P6 0.",
          typeEncoding: "探明资源量",
          yearAccumulation: "2833/245.69",
          earlyTenure: "",
          expNumber: "",
          amountOfLoss: "",
          survey: "",
          rollBack: "",
          amountOfOverlay: "",
          other: "",
          yearEndTenure: "",
          cumulative: ""
        },
        {
          mineralName: "铅矿(共生矿产)",
          unitNmae: "铅吨矿石千吨",
          brand: "硫化铅矿石不分品级",
          quality: "P6 0.907 96",
          typeEncoding: "探明资源量",
          yearAccumulation: "2833/245.69",
          earlyTenure: "",
          expNumber: "",
          amountOfLoss: "",
          survey: "",
          rollBack: "",
          amountOfOverlay: "",
          other: "",
          yearEndTenure: "",
          cumulative: ""
        },
        {
          mineralName: "铅矿(共生矿产)",
          unitNmae: "铅吨矿石千吨",
          brand: "硫化铅矿石不分品级",
          quality: "P6 0.907 96",
          typeEncoding: "探明资源量",
          yearAccumulation: "2833/245.69",
          earlyTenure: "",
          expNumber: "",
          amountOfLoss: "",
          survey: "",
          rollBack: "",
          amountOfOverlay: "",
          other: "",
          yearEndTenure: "",
          cumulative: ""
        }
      ], //tbody具体数据
      needRowSpan: [], //tbody需要跨行的key
      span: {} //所跨的行数
    };
  },
  mounted() {
    this.maxHeight = this.getMaxFloor(this.columns); //1. 计算出表头一共需要多少行
    this.columnsHandle(this.columns); //2. 对表头进行处理
    this.dataHandle(this.dataList, this.needRowSpan); // 3. 对数据进行处理（传入参数： 具体数据，需要跨行列的（key））
  },
  methods: {
    resetRowSpan(row, key) {
      if (this.span[key] && this.span[key][row]) {
        return this.span[key][row];
      }
      return 1;
    },
    gerMaxCol(items) {
      let max = 0;
      function each(data) {
        if (max < data.length) {
          max = data.length;
        }
        data.forEach((item) => {
          if (item.children) {
            each(item.children);
          }
        });
      }
      each(items);
      return max;
    },
    getMaxFloor(treeData) {
      let max = 0;
      function each(data, floor) {
        data.forEach((e) => {
          if (floor > max) {
            max = floor;
          }
          if (e.children && e.children.length > 0) {
            each(e.children, floor + 1);
          }
        });
      }
      each(treeData, 1);
      return max;
    },
    columnsHandle(treeData) {
      const that = this;
      const maxFloor = this.maxHeight;
      function each(data, index) {
        if (that.newArr[index] === undefined) {
          that.newArr[index] = [];
        }
        data.forEach((e) => {
          const obj = {
            title: e.title,
            key: e.key,
            rowspan: maxFloor,
            colspan: 1
          };
          if (e.children) {
            obj.colspan = that.gerMaxCol(e.children);
            obj.rowspan = maxFloor - that.getMaxFloor(e.children);
          } else {
            that.colKeyList.push(e.key);
            if (e.hasrowspan) {
              //  如果存在hasrowspan属性并且值为true，则表明该key列存在跨行
              that.needRowSpan.push(e.key);
            }
          }
          that.newArr[index].push(obj);
          if (e.children && e.children.length > 0) {
            each(e.children, index + 1);
          }
        });
      }
      each(treeData, 0);
    },
    dataHandle(dataList, needRowSpan) {
      needRowSpan.forEach((key) => {
        const sum = {};
        let i = 0;
        let k = 0;
        const that = this;
        for (let j = 0; j < dataList.length; j += 1) {
          i += 1;
          let tdList = [];
          if (dataList[j].tdList) {
            tdList = [...dataList[j].tdList];
          } else {
            tdList = [...that.colKeyList];
          }
          if (
            dataList[j - 1] &&
            (dataList[j][key] === dataList[j - 1][key] || !dataList[j][key])
          ) {
            const index = tdList.indexOf(key);
            if (index > -1) {
              tdList.splice(index, 1);
            }
          }
          dataList[j].tdList = tdList;
          if (dataList[j + 1] && dataList[j + 1][key]) {
            if (dataList[j][key] !== dataList[j + 1][key]) {
              sum[k] = i;
              i = 0;
              k = j + 1;
            }
          } else if (!dataList[j + 1]) {
            sum[k] = i;
          }
        }
        this.span[key] = sum;
      });
      this.showTable = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #515a6e;
  border: 1px solid #515a6e;
}
.table thead tr th {
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  background-color: #f8f8f9;
}
td,
th {
  text-align: center;
  border: 1px solid #e8eaec;
}
.table thead tr th,
.table tbody tr td {
  padding: 0 10px;
}
.table tbody tr td {
  height: 48px;
}
</style>
  • 存在问题：返回的数据需要按相同字符的顺序进行返回，不然合并错乱
  • 如果返回数据是树型数据，也可以扁平化之后再进行处理
  // 扁平化树
    flatTree(list) {
      return list.reduce((ls, item) => {
        let { children, ...res } = item;
        if (children && children.length) {
          return ls.concat(res, this.flatTree(children));
        } else {
          return ls.concat(res);
        }
      }, []);
    },
造糖主义
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【JavaScript源代码】Vue Elenent实现表格相同数据列合并.docx
12-29
Vue Elenent实现表格相同数据列合并 　　本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码，供大家参考，具体内容如下　　作者：秋名　　思路：后台查询表格数据，查询出来后直接传到前端，前端通过foreach循环，然后对相同的表格进行合并。（同一个表格，但是每一行，固定一列的数据都相同，即可使用合并单元格，做到了既美观，也清晰。）　　template：　　<el-table　　 :span-method="objectSpanMethod4" //在el-table里面添加合并单元格属性　　 >　　Js:　　data(){　　return{　　 orderdata
vue中el-table同列相同数据合并
weixin_44220858的博客
08-02 830
el-table中相同数据内容的数据列合并单元格。
(vue)el-table 怎么把表格列中相同的数据 合并为一行
nyf_unknow的博客
08-22 1099
【代码】(vue)el-table 怎么把表格列中相同的数据 合并为一行。
vue3实现table第一列第二列合并相同行
最新发布
weixin_44308055的博客
03-14 508
1、vue实现table第一列第二列合并相同行。 2、table合并相同行。
vue+element-ui表格之相同数据合并单元格，动态生成
sxl_lala的博客
12-11 910
span-method="(scope) => objectSpanMethod(scope, props)"，scope作用域，props绑定的数据。首先利用组件的方法，他们用的时候表格都是死的,而我的表格是动态生成,处理数据的时候列表数据data传不进去，方法不可行。
vue element ui table表格有相同数据单不规则合并单元格
qq_41531475的博客
02-01 790
element ui table表格有相同数据单不规则合并单元格
elemnt-ui的el-table在table中合并某个字段相同的项（vue3）
thm0805的博客
11-03 869
/ 只需要将 xxx 修改为自己需要合并的字段名即可。if (index === 0) {//想合并第几列写几。1、el-table添加span-method。//第一列需合并相同内容的判断条件。
vue element ui 表格有相同数据合并单元格
qq_56664436的博客
02-03 4124
vue element ui 表格有相同数据合并单元格
Vue学习笔记六：element-ui中表格单元格合并（多个if else语句的优化）
Ocean111best的博客
08-12 1234
最近平台中有一个需求：读取excel文件，并将表格显示在前端。之前我们实现了将一个json数据读取之后放到表格里（直接读取excel也差不多）。实现这个不难，主要是合并单元格有些麻烦，element-ui自己提供了合并行或列的计算方法：span-method，但是首先要处理下合并的单元格数据。 合并前： 合并后： 实现步骤简单来说有两步，这里会逐步展开来说，也会说明下每一步最开始的写法，然后一步步优化，消除多个 if else 语句，使代码更加简洁，这个过程中逐步地进行抽象封装。 一、读..
element ui表格合并-vue2
Timi_666的博客
02-24 308
elementui表格合并，关键的是处理数据，通过for循环遍历处理，对需要合并的列的值进行比较，达到合并效果，最后必须将值进行倒序处理否则无效 this.tableData.reverse()运用了官方的方法 :span-method="objectSpanMethod",写在methods方法里面。最后说明一下,方法是我的一个朋友刘总（小刘）帮助下，进一步修改完成的。希望对大家有帮助。
vue2+element-ui表格组件合并单元格的几种情况
2301_76925705的博客
09-14 3913
https://img-blog.csdnimg.cn/bdfc18f2a0c0478f904b0af9c49626a2.jpeg
Vxe Table/Grid 单元格分组合并
08-14
Vxe Table/Grid 单元格分组合并
antd vue table跨行合并单元格,并且自定义内容实例
01-18
需求：表格实现跨行合并，并且在合并完的单元格中显示图片 效果图： 源码： export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), ...
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
vue-easytable合并单元格
05-18
vue-easytable合并单元格，文档包括ftl文件及对应的js
vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现
05-16
vue-easytable表格老版本有表格列宽拖功能，但是最新版插件反而不存在该功能，但是大部分表格数据存在...若将ve-table封装以组件形式引用，可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。
40-Vue之实现表格首列相同数据合并
小白的博客
04-18 545
Vue之实现表格首列相同数据合并
纯js Vue 合并相同的单元格 表格合并
bydongxin的博客
09-28 644
mergeCell(tableId, cols) { let that = this var table = document.getElementById(tableId); var table_rows = table.rows; cols.forEach((v, k) => { for (let i = 0; i < table_rows.length - 1; i++) { let now_row = .
vue3 table动态合并，自定义参数合并单元格
Passerby_K的博客
08-08 1907
【代码】vue3 table动态合并，自定义参数合并单元格。
vue3 element-puls el-table 汇总行单元格合并
05-17
要实现Vue3 Element-Plus的el-table汇总行单元格合并，你可以使用`span-method`属性来定义一个函数，该函数可以返回每个单元格需要合并的行数和列数。下面是一个示例代码： ```html <el-table :data="tableData" ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值