iview的table动态合并行列的完整示例

最新推荐文章于 2024-05-16 09:15:36 发布

前端开心果

最新推荐文章于 2024-05-16 09:15:36 发布

阅读量2.7k

点赞数 2

分类专栏： vue 文章标签： javascript 前端 vue.js iview

本文链接：https://blog.csdn.net/qq_38157825/article/details/125101981

版权

vue 专栏收录该内容

113 篇文章 11 订阅

订阅专栏

官网解析

先看看官网示例

<template>
  <Table
    :columns="columns"
    :data="data"
    border
    :span-method="handleSpan"
  ></Table>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "Date",
          key: "date",
        },
        {
          title: "Name",
          key: "name",
        },
        {
          title: "Age",
          key: "age",
        },
        {
          title: "Address",
          key: "address",
        },
      ],
      data: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
    };
  },
  methods: {
    handleSpan({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 0) { // 表示的是第一行第一列
        return [1, 2]; // 表示合并1行2列
      } else if (rowIndex === 0 && columnIndex === 1) { // 表示的是第一行第二列
        return [0, 0]; // 表示合并0行0列，即被合并的单元格（注意：被合并到单元格一定要返回[0,0]否则数据会乱套）
      }
      if (rowIndex === 2 && columnIndex === 0) { // 表示的是第三行第一列
        return { // 表示合并2行1列
          rowspan: 2,
          colspan: 1,
        };
      } else if (rowIndex === 3 && columnIndex === 0) { // 表示的是第四行第一列
        return { // 表示合并0行0列
          rowspan: 0,
          colspan: 0,
        };
      }
    },
  },
};
</script>

在这里插入图片描述
主要是设置 span-method属性可以指定合并行或列的算法。
上面代码示例是根据行号和列号来进行合并判断的，现实情况我们很有可能需要动态判断合并的单元格。

注意：在合并行时，需要合并到数据必须相邻，数据在数组中的下标要紧挨这，否则无法合并。可以自己根据需要将数据排好序后再合并。

示例1：只根据某一列合并行

假设我们根据name值相同的合并单元格
效果图：
在这里插入图片描述
代码实现：

<template>
  <Table
    :columns="columns"
    :data="data"
    border
    :span-method="handleSpan"
  ></Table>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "Date",
          key: "date",
        },
        {
          title: "Name",
          key: "name",
        },
        {
          title: "Age",
          key: "age",
        },
        {
          title: "Address",
          key: "address",
        },
      ],
      resData: [
        {
          id: "1",
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
        },
        {
          id: "3",
          name: "John Brown",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          id: "2",
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          id: "4",
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
      data: [],
    };
  },
  methods: {
    handleSpan({ row, column, rowIndex, columnIndex }) {
      //合并第二列,这里columnIndex===1 根据具体业务来，比如本示例中需要合并的name为第二列
      if (columnIndex === 1) {
        //计算合并的行数列数
        let x = row.mergeCol === 0 ? 0 : row.mergeCol;
        let y = row.mergeCol === 0 ? 0 : 1;
        return [x, y];
      }
    },
    formatData(data) {
      let names = [];
      //筛选出不重复的 name值,将其放到 names数组中
      data.forEach((e) => {
        if (!names.includes(e.name)) {
          names.push(e.name);
        }
      });

      let nameNums = [];
      //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
      names.forEach((e) => {
        nameNums.push({ name: e, num: 0 });
      });

      //计算每种 name值所在行需要合并的单元格数
      data.forEach((e) => {
        nameNums.forEach((n) => {
          if (e.name === n.name) {
            n.num++;
          }
        });
      });

      //将计算后的合并单元格数整合到 data中
      data.forEach((e) => {
        nameNums.forEach((n) => {
          if (e.name === n.name) {
            if (names.includes(e.name)) {
              e.mergeCol = n.num;
              //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
              names.splice(names.indexOf(n.name), 1);
            } else {
              //被合并的单元格设置为 0
              e.mergeCol = 0;
            }
          }
        });
      });

      //将整理后的数据交给表格渲染
      return data;
    },
  },
  mounted() {
    this.data = this.formatData(this.resData);
  },
};
</script>

示例2：先根据某一列合并行，再根据合并的行合并另一列中的行

什么意思，意思就是比如我先合并了name列中相同的行，如果name列已经合并的行中还有相同的age列需要合并的话，应该怎么做？

数据预处理：先排序，把相同的name值放到一起，然后再把相同的age放到一起

效果图：
在这里插入图片描述
代码实现：

<template>
  <Table
    class="border-table"
    :columns="columns"
    :data="data"
    border
    :span-method="handleSpan"
  ></Table>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "Date",
          key: "date",
        },
        {
          title: "Name",
          key: "name",
        },
        {
          title: "Age",
          key: "age",
        },
        {
          title: "Address",
          key: "address",
        },
      ],
      resData: [
        {
          id: "1",
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
        },
        {
          id: "3",
          name: "John Brown",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          id: "5",
          name: "John Brown",
          age: 24,
          address: "London No. 2 Lake Park",
          date: "2016-10-03",
        },
        {
          id: "2",
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          id: "4",
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
      data: [],
    };
  },
  methods: {
    handleSpan({ row, column, rowIndex, columnIndex }) {
      //合并第二列,这里columnIndex===1 根据具体业务来，比如本示例中需要合并的name为第二列
      if (columnIndex === 1) {
        //计算合并的行数列数
        let x = row.mergeCol === 0 ? 0 : row.mergeCol;
        let y = row.mergeCol === 0 ? 0 : 1;
        return [x, y];
      }
      // age 合并
      if (columnIndex === 2) {
        //计算合并的行数列数
        let x = row.mergeColAge === 0 ? 0 : row.mergeColAge;
        let y = row.mergeColAge === 0 ? 0 : 1;
        return [x, y];
      }
    },
    formatData(data) {
      // 根据 name 排序 age
      for (let i = 0; i < data.length - 1; i++) {
        for (let n = i + 1; n < data.length; n++) {
          if (data[i].age > data[n].age) {
            [data[i], data[n]] = [data[n], data[i]];
          }
        }
      }
      let names = [];
      //筛选出不重复的 name值,将其放到 names数组中
      data.forEach((e) => {
        if (!names.includes(e.name)) {
          names.push(e.name);
        }
      });

      let nameNums = [];
      //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
      names.forEach((e) => {
        nameNums.push({ name: e, num: 0 });
      });

      //计算每种 name值所在行需要合并的单元格数
      data.forEach((e) => {
        nameNums.forEach((n) => {
          if (e.name === n.name) {
            n.num++;
          }
        });
      });

      //将计算后的合并单元格数整合到 data中
      data.forEach((e) => {
        nameNums.forEach((n) => {
          if (e.name === n.name) {
            if (names.includes(e.name)) {
              e.mergeCol = n.num;
              //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
              names.splice(names.indexOf(n.name), 1);
            } else {
              //被合并的单元格设置为 0
              e.mergeCol = 0;
            }
          }
        });
      });

      //不唯一且重复的情况下，在唯一的基础上合并重复
      for (let j = 0; j < data.length; j++) {
        //  > 1 name 表示 有合并需要在name合并的row中 再合并
        if (data[j].mergeCol > 1) {
          for (let k = 0; k < data[j].mergeCol; k++) {
            //age合并
            if (data[j + k].ageAlready !== 1) { // 需要这个条件，避免数据重复
              if (k + 1 < data[j].mergeCol) {
                data[j + k].mergeColAge = 1
                for (let b = k + 1; b < data[j].mergeCol; b++) {
                  if (data[j + k].age === data[j + b].age) {
                    data[j + k].mergeColAge++;
                    data[j + b].mergeColAge = 0;
                    data[j + b].ageAlready = 1;
                  } else {
                    break;
                  }
                }
              }
            }
          }
        }
        // 如果有需要在age合并到row中 再合并的话代码添加到此处
      }

      //将整理后的数据交给表格渲染
      return data;
    },
  },
  mounted() {
    this.data = this.formatData(this.resData);
  },
};
</script>