element-table表格动态合并单元格

最新推荐文章于 2024-07-09 12:13:23 发布

getyefang

最新推荐文章于 2024-07-09 12:13:23 发布

阅读量388

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_36821274/article/details/126706840

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

该示例展示了如何在Vue.js中使用Element UI库创建一个带有数据的表格，并实现行合并功能。表格包含商户编号、商户姓名、车牌号等字段，数据包括多个交易记录，通过`rowspan`方法处理相同值的行合并。

摘要由CSDN通过智能技术生成

效果：

html：

<el-table :data="querylist" :span-method="objectSpanMethod" border stripe >
      <el-table-column
        prop="merchantNo"
        label="商户编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="merchantName"
        label="商户姓名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="carNo"
        label="车牌号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="financeReceiveTime"
        label="收款时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="tradeShopName"
        label="成交门店"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="carTradedPrice"
        label="车款"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="depositAmount"
        label="手续费押金"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="feeTurnoverAmount"
        label="库存周转费"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="totalShouldPayAmount"
        label="应收"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="totalPayAmount"
        label="实收"
        align="center"
      ></el-table-column>
      <el-table-column prop="isFee" label="是否服务费" align="center" ></el-table-column>
      <el-table-column prop="payTypeName" label="银行/现金" align="center" ></el-table-column>
      <el-table-column prop="amount" label="金额" align="center" ></el-table-column>
    </el-table>

js：

export default {
  data() {
    return {
      querylist: [], //
      total: 0,
      currentPage: 1,
      pageSize: 10,
      testArr: [],
      testPosition: 0,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
        this.querylist=[{
                  "id": 1,
                  "merchantNo": "H123",
                  "merchantName": "张三",
                  "carNo": "沪A.1234",
                  "tradeShopName": "测试店",
                  "carTradedPrice": 76999.22,
                  "depositAmount": 70.22,
                  "feeTurnoverAmount": 50.22,
                  "totalShouldPayAmount": 12.45,
                  "totalPayAmount": 12.45,
                  "financeReceiveTime": "2021-01-02 12:12:12",
                  "isFee": "是",
                  "payTypeName": "POS",
                  "amount": 1.28
                },{
                  "id": 2,
                  "merchantNo": "H1237",
                  "merchantName": "张三",
                  "carNo": "沪A.1234",
                  "tradeShopName": "测试店",
                  "carTradedPrice": 76999.22,
                  "depositAmount": 70.22,
                  "feeTurnoverAmount": 50.22,
                  "totalShouldPayAmount": 12.45,
                  "totalPayAmount": 12.45,
                  "financeReceiveTime": "2021-01-02 12:12:12",
                  "isFee": "是",
                  "payTypeName": "现金",
                  "amount": 1.28
                },{
                  "id": 3,
                  "merchantNo": "H1234",
                  "merchantName": "张三",
                  "carNo": "沪A.12345",
                  "tradeShopName": "测试店",
                  "carTradedPrice": 76999.22,
                  "depositAmount": 70.22,
                  "feeTurnoverAmount": 50.22,
                  "totalShouldPayAmount": 12.45,
                  "totalPayAmount": 12.45,
                  "financeReceiveTime": "2021-01-02 12:12:12",
                  "isFee": "是",
                  "payTypeName": "现金",
                  "amount": 1.28
                },{
                  "id": 3,
                  "merchantNo": "H1234",
                  "merchantName": "张三",
                  "carNo": "沪A.12345",
                  "tradeShopName": "测试店",
                  "carTradedPrice": 76999.22,
                  "depositAmount": 70.22,
                  "feeTurnoverAmount": 50.22,
                  "totalShouldPayAmount": 12.45,
                  "totalPayAmount": 12.45,
                  "financeReceiveTime": "2021-01-02 12:12:12",
                  "isFee": "是",
                  "payTypeName": "银行",
                  "amount": 1.28
                },{
                  "id": 3,
                  "merchantNo": "H1234",
                  "merchantName": "张三",
                  "carNo": "沪A.12345",
                  "tradeShopName": "测试店",
                  "carTradedPrice": 76999.22,
                  "depositAmount": 70.22,
                  "feeTurnoverAmount": 50.22,
                  "totalShouldPayAmount": 12.45,
                  "totalPayAmount": 12.45,
                  "financeReceiveTime": "2021-01-02 12:12:12",
                  "isFee": "是",
                  "payTypeName": "POS",
                  "amount": 1.28
                }]

        this.rowspan(this.testArr, this.testPosition, "merchantNo");
    },
     // 获取数据
    rowspan(spanArr, position, spanName) {
      this.querylist.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1);
          position = 0;
        } else {
          if (
            this.querylist[index][spanName] ===
            this.querylist[index - 1][spanName]
          ) {
            spanArr[position] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            position = index;
          }
        }
      });
    },
    // 表格合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([0,1,2,3,4,5,6,7,8,9].includes(columnIndex)) {
        const _row = this.testArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
  },
};
</script>