Iview和Element UI Table组件动态合并单元格

说明: 此方法暂时只支持合并列,不支持合并行。

安装

npm i method-tools --save

导入

import { calculate, handleSpan } from "method-tools/table-merge";

        每次表格数据更新时都要调用calculate函数来计算需要合并的单元格, calculate函数接受四个参数: 第一个是表格的数据、第二个是表格的列，第三个是需要合并的列的字段组成的数组，第四个是一个标识

        handleSpan函数接收一个参数,handleSpan的参数要和calculate的第四个参数保持一致;

        handleSpan()作为table组件的span-method的参数;

        handleSpan的参数和calculate的第四个参数可以同时都不传;

在iview中使用

<template>
    <Table :columns="column" :data="data" :span-method="handleSpan" />
</template>

<script>
import { calculate, handleSpan } from "method-tools/table-merge";
export default {
  data() {
    return {
      column: [
        { title: "Name", key: "name", },
        { title: "Sex", key: "sex", },
        { title: "Age", key: "age", },
      ],
      data: [],
    };
  },
  created() {
    this.data = [
      { name: "张三", sex: "男", age: "20" },
      { name: "张三", sex: "男", age: "20" },
      { name: "李四", sex: "女", age: "20" },
      { name: "李四", sex: "女", age: "20" },
      { name: "李四", sex: "女", age: "20" },
      { name: "李四", sex: "男", age: "20" },
      { name: "李四", sex: "男", age: "20" },
    ]
    calculate(this.data, this.column, ["name", "sex"]);
  },
  methods: {
    handleSpan: handleSpan()
  },
};
</script>

在Element UI中使用 

        在element ui中使用需要自己构造columns数组,也就是calculate的第二个参数,为一个数组对象,每个对象都要有个属性key,值为渲染当前列的字段, columns的顺序和长度要和table的列保持一致

<template>
  <el-table :data="data" :span-method="handleSpan">
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="sex" label="性别" />
    <el-table-column prop="age" label="年龄" />
  </el-table>
</template>

<script>
import { calculate, handleSpan } from "method-tools/table-merge";
export default {
  data() {
    return {
      data: [],
      columns: [   // 要和表格的列保持一致
        { key: "name" },
        { key: "sex" },
        { key: "age" }
      ]
    };
  },
  created() {
    this.data = [
      { name: "张三", sex: "男", age: "20" },
      { name: "张三", sex: "男", age: "20" },
      { name: "李四", sex: "女", age: "20" },
      { name: "李四", sex: "女", age: "20" },
      { name: "李四", sex: "女", age: "20" },
      { name: "李四", sex: "男", age: "20" },
      { name: "李四", sex: "男", age: "20" },
    ];
    calculate(this.data, this.columns, ["name", "sex"]);
  },
  methods: {
    handleSpan: handleSpan()
  },
};
</script>