Bootstrap

vue之table表格的合并

目录

vue之table表格的动态合并

vue之table表格的动态合并 后台给数据 处理断层

  • 转载于：https://blog.csdn.net/qq_43563070/article/details/105545923
    在这里插入图片描述
        <el-table
          :data="tableData"
          :span-method="arraySpanMethod"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="ID" width="180"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="amount1" label="数值 1"> </el-table-column>
          <el-table-column prop="amount2" label="数值 2"> </el-table-column>
          <el-table-column prop="amount3" label="数值 3"> </el-table-column>
        </el-table>

<script>
export default {
  name: "ProjectLoanInfoQuery",
  components: {
  },
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "165",
          amount2: "4.43",
          amount3: 12,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "合计1",
          name: "",
          amount1: "121212",
          amount2: "121212",
          amount3: "121212",
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 9,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "621",
          amount2: "2.2",
          amount3: 17,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "539",
          amount2: "4.1",
          amount3: 15,
        },
        {
          id: "合计2",
          name: "",
          amount1: "121212",
          amount2: "121212",
          amount3: "121212",
        },
      ],
      colArr1: [6, 0, 0, 0, 0, 0, 1, 6, 0, 0, 0, 0, 0, 1],
      // 合拼数组,1表示不合拼，0表示该行被合并，colArr1的长度就是后台返回的数组长度

      // table
      sumBalanceList: [
        {
          curName: "人民币",
          curcd: "CNY",
          sumBalance: 1933333333,
          sumBalanceCanUse: 1932333333,
          sumBalanceCanUseRmb: 1932333333,
          sumBalanceRmb: 1933333333,
          sumBalanceUsed: 1000000,
          sumBalanceUsedRmb: 1000000,
        },
        {
          curName: "美元",
          curcd: "USD",
          sumBalance: 1542289,
          sumBalanceCanUse: 1542289,
          sumBalanceCanUseRmb: 1542289,
          sumBalanceRmb: 1542289,
          sumBalanceUsed: 2222222,
          sumBalanceUsedRmb: 2222222,
        },
      ],
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //合拼第一二列的行
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        const _row = this.colArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        console.log("_row", _row, "_col", _col);
        //返回行和列的合拼数
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>

vue之table表格的动态合并 后台给数据 前端处理断层

在这里插入图片描述

      <div class="table-wrap">
        <listTabel
          :style="{ height: '100%' }"
          :data="tableData"
          :spanMethod="arraySpanMethod"
          :isLoading="loading"
          ref="listTable"
        />
      </div>

      tableData: {
        tableCol: [
          { prop: "custname", label: "企业名称", minWidth: 250 },
          { prop: "type", label: "业务类别", minWidth: 120 },
          { prop: "projectName", label: "项目名称", minWidth: 120 },
          { prop: "projectInvestAmt", label: "项目总投", minWidth: 120 },
          { prop: "projectCapitalAmt", label: "项目资本金", minWidth: 120 },
          { prop: "syndicatedTotalAmt", label: "银团总额", minWidth: 120 },
          { prop: "bankType", label: "银团行类型", minWidth: 120 },
          { prop: "bankName", label: "银行名称", minWidth: 120 },
          { prop: "bankApproveDate", label: "批复时间", minWidth: 120 },
          { prop: "curcdName", label: "币种", minWidth: 120 },
        ],
        tableData: [],
      },
      colArr1: [],


		// 请求数据后来后处理
        this.tableData.tableData = data.dat.data.map( item => {
          if ( item.id == "小计") {
            item.custname = "小计";
          }
          return item;
        })
        this.defaultValue.total = data.dat.count;
        let colArr = []; // table需要合并的数据 合拼数组,1表示不合拼，0表示该行被合并，colArr1的长度就是后台返回的数组长度
        let upIndex = 0  // 上一次小计的 index初始值
        if ( data.dat.data && data.dat.data.length > 0 ) {
          // 第一个为小计的时候 
          if ( data.dat.data[0].id  === "小计") {
                colArr.push(1)
                upIndex = 1; // 记录上一次小计的 index
            }
          data.dat.data.forEach((item, index) => {
            if ( item.id == "小计" && index != 0 ) { // 判断是否为小计
              let resIndex = index - upIndex; // 当前合并的index长度 = 当前index - 上一次index
              colArr.push(resIndex) // push 一个 计算出来的合并行数 当前被合并的行
              for (let i = 0; i < resIndex - 1 ; i++) {
                colArr.push(0) // push 一个 0 当前被合并的行
              }
              colArr.push(1) // push 一个 1 当前被合并的行
              upIndex = colArr.length; // 记录上一次index
            } 
          });
          // 最后一个没有小计的时候 从最后一条合并到上一条有小计的数据
          if ( data.dat.data[data.dat.data.length - 1 ].id  !== "小计") {
              let resIndex = data.dat.data.length - upIndex; // 当前合并的index长度 = 当前index - 上一次index
              colArr.push(resIndex) // push 一个 计算出来的合并行数 当前被合并的行
          } 
        }
        // console.log("colArr",colArr);
        this.colArr1 = colArr;


    // 合并table
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //合拼第一二列的行
      if (columnIndex <= 6) {
        const _row = this.colArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        // console.log("_row", _row, "_col", _col);
        //返回行和列的合拼数
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

根据后台数据合并前三列数据

在这里插入图片描述

	// 数据
	  // 合并表格的
      merageArr: [],
      meragePos: 0,
      tableData: [
        {
          industryName: "合并1",
          contractno:"001",
          custname:"菜鸡1"
        },
        {
          industryName: "合并1",
          contractno:"001",
          custname:"菜鸡1"
        },
        {
          industryName: "合并2",
          contractno:"002",
          custname:"菜鸡2"
        },
        {
          industryName: "合并2",
          contractno:"002",
          custname:"菜鸡2"
        },
        {
          industryName: "合并3",
          contractno:"003",
          custname:"菜鸡"
        },
      ],
	
	// 查询后 调用
	this.merage(this.tableData)	

    // 合并table数据
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 2) {
        const _row = this.merageArr[rowIndex];
        const _col = _row > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 要合并的数组的方法
    merage(tableData) {
      this.merageInit();
      for (var i = 0; i < tableData.length; i++) {
        if (i === 0) {
          // 第一行正常显示 必须存在
          this.merageArr.push(1);
          this.meragePos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同 根据是否合并的id
          if (tableData[i].industryName === tableData[i - 1].industryName) {
            this.merageArr[this.meragePos] += 1;
            this.merageArr.push(0);
          } else {
            this.merageArr.push(1);
            this.meragePos = i;
          }
        }
      }
    },
    merageInit() {
      this.merageArr = [];
      this.meragePos = 0;
    },

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
《Python源码剖析》之PyTypeObject
Elasticsearch向量检索（KNN）千万级耗时长问题分析与优化方案
(自定义数据集) VOC格式转化为COCO格式
org.apache.http.conn.HttpHostConnectException: Connection to refused
图解单片机下载程序电路原理之USB转串口线、CH340、PL2303、MAX232芯片的使用！...
MongoDB数据库基本操作
强化学习-优化策略算法（DPO和PPO）
《中文Python穿云箭量化平台二次开发技术10》基于Tkinter的可视化股票池量化平台开发技术
Android EditText获取焦点自动弹出软键盘的方法 【完美解决】
【数据结构】排序（上）
;