elementui列合并-element-UI table实现表格行动态合并

bendan520 elementui

2023-09-05 0 6,767 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

本文主要给出一个项目中的真实例子，方便大家和我一样在实际项目开发中遇到的所需功能的开发。（可直接使用）

你饿了吗？ table组件官方示例：#/zh-CN/component/table，在实际开发过程中elementui列合并，官方示例很难满足需求，而实际需求通常是动态组合而不是固定的elementui列合并，所以此时我们需要处理它。

大致思路是：首先将查询到的列表数据划分为哪些列和行需要合并，但是要合并多少行或多少列，将这些数据记录放到一个空链表中，然后根据这个字段进行相应的操作合并的合并。

.vue 文件：

vue.js（脚本）文件：


import { getProjectDeductDatas } from "./api";
export default {
  name: "ProjectDeduct",
  props: {},
  data() {
    return {
      list: [],
      listLoading: true,
      dynamicValidateForm: {
        domains: []
      },
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr 的索引
      contentSpanArr: [],
      position: 0
    };
  },
 
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    // 合并单元格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 2) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      } else if (columnIndex === 3) {
        const _row = this.contentSpanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 获取列表数据
    getList() {
      const self = this;
      const { SCORE_ID, searchForm } = self;
      self.listLoading = true;
      getProjectDeductDatas({
        SCORE_ID: scoreId,
        NAME: searchForm.NAME
      })
        .then(({ data }) => {
          self.listLoading = false;
          this.dynamicValidateForm.domains = data || [];
 
          // 设定一个数组spanArr/contentSpanArr来存放要合并的格数，同时还要设定一个变量pos/position来记录
          this.spanArr = [];
          this.contentSpanArr = [];
          for (var i = 0; i  {
          self.listLoading = false;
          console.log(err);
        });
    }
  },
  watch: {}
};