＜el-table＞使用

  <el-table
        :data="tableData"
        ref="tableData"
        border  //是否带有纵向边框
        stripe	//是否为斑马纹 table
        show-summary	//合计行
        :summary-method="getSummaries" //自定义合计行
        row-key="onlyId		//行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。        
        style="min-height: 300px"
        :height="tableHeight"
        show-overflow-tooltip
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="marketingUserNo"
          label="营销发电户号"
          width="90"
          align="left"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="publishers"
          width="90"
          label="结算单元名称"
          align="left"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="memberName"
          width="90"
          label="发电企业名称"
          align="left"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="ifPaymentName"
          width="90"
          label="是否付款"
          align="center"
        ></el-table-column>
        <el-table-column
          align="right"
          width="90"
          prop="moneyTotalMatch"
          show-overflow-tooltip
          label="发票匹配账单价税合计"
        ></el-table-column>
        <el-table-column
          align="right"
          prop="havePaid"
          show-overflow-tooltip
          label="已支付金额"
        ></el-table-column>
        <el-table-column
          align="right"
          prop="payment"
          show-overflow-tooltip
          label="支付中金额"
        ></el-table-column>
        <el-table-column
          align="right"
          prop="noPay"
          show-overflow-tooltip
          label="未支付金额"
        ></el-table-column>
        <el-table-column
          align="right"
          prop="payFee"
          width="100"
          show-overflow-tooltip
          label="本次付款申请金额"
        >
          <template slot-scope="scope">
            <el-input
              type="number"
              class="table_input"
              v-model="scope.row.payFee"
              :disabled="scope.row.inpDisabled"
              @blur="inpBlur(scope.row)"
              size="small"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="90"
          show-overflow-tooltip
          label="未支付详情"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              v-show="!scope.row.children"
              @click="detail(scope.row)"
              >查看
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="paymentControlledCauseName"
          label="支付受控原因"
          align="center"
        >
        </el-table-column>
        <el-table-column
          align="right"
          prop="thisMonthTotalFee"
          show-overflow-tooltip
          label="当月实结电费"
        ></el-table-column>
        <el-table-column
          align="right"
          prop="thisMonthPriceTax"
          show-overflow-tooltip
          label="当月开票金额"
        ></el-table-column>
        <el-table-column
          align="right"
          prop="totalActualAmount"
          show-overflow-tooltip
          label="当月累计实付金额"
        ></el-table-column>
        <el-table-column
          align="right"
          prop="check"
          show-overflow-tooltip
          label="校验"
        ></el-table-column>
        <el-table-column
          align="right"
          prop="remark"
          show-overflow-tooltip
          label="备注"
        >
          <template slot-scope="scope">
            <el-input
              class="table_input"
              v-model="scope.row.remark"
              size="small"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        small
        :page-sizes="page.pageSizes"
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="currentChange"
        @size-change="sizeChange"
        style="text-align: right; height: 30px"
      ></el-pagination>

合计

 //合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if 
        (index === 0) {
          sums[index] = "";
          return;
        }
        if (index === 1) {
          sums[index] = "合计：";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        var colList = [
          "moneyTotalMatch",
          "havePaid",
          "payment",
          "noPay",
          "payFee",
          "thisMonthTotalFee",
          "thisMonthPriceTax",
          "totalActualAmount",
        ];
        colList.forEach((col) => {
          if (column.property == col) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index];
          }
        });
      });
      return sums;
    },

data

data() {
    return {
      isSelectAll: false,
      tableHeight: window.innerHeight - 300,
      queryData: {
        settleMonth: this.$commonUtilV2.getCurrentMonth(),
        lastSettleMonth: this.$commonUtilV2.getPreMonth(),
        memberIdList: [],
        genId: null,
        ifPayment: "",
        paymentControlledCause: "",
      },
      selectCheckData: [], // 选中的数据
      tableData: [],
      page: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
        pageSizes: [10, 30, 50, 100, 200],
      },
    };
  },

查询未支付详情

 detail(row) {
     let parentDate = "";
     _this.$layer.iframe({
       title: "未支付详情",
       area: [1000, 400],
       content: {
         content: require("./payMentDetail").default,
         parent: this,
         data: {
           memberId: row.memberId,
           payDate: parentDate,
         },
       },
     });
   },

更新完数据之后 表格错位

• 在查询方法最后加上下面代码 用于刷新表格

_this.$nextTick(() => {
        _this.$refs.userTable.doLayout()
})