vue + element table单选、动态求和功能

随手记：table表格在vue中的单选、单行求和问题。

html

<el-table
 :data="tableData"
 border
 style="width: 100%"
>
// 单选
<el-table-column width="60px" align="center">
 <template slot-scope="scope">
  <el-checkbox
    v-model="scope.row.checked"
    @change="changeCurrentRow($event, scope.$index, scope.row)"
   ></el-checkbox>
 </template>
</el-table-column>
....
</el-table>

js

data() {
  return {
    tableData: [],
    values: [],
    itemNum: 0,
  }
}
methods: {
	// 自定义求和，在取到数据后调用
	theTabAll() {
	// 循环获取每行应还租金
      this.tableData.forEach((item) => {
        item.repaymentCapitalAmtSum = (Number(item.principalRepaymentCapitalAmt) + Number(item.interestRepaymentCapitalAmt)).toFixed(2);
      });
    },
    // 计算剩余本金
    theTabReduce() {
      this.values = [];
      this.itemNum = 0;
      // map得到当前list所有支出数据
      this.values = this.tableData.map((items) => Number(items.principalRepaymentCapitalAmt));
      // foreach 遍历计算剩余本金
      this.values.forEach((item, index) => {
        this.itemNum += item;
        this.tableData[index].capitalAmt =
          (this.theAllnum * 10000 - this.itemNum).toFixed(2);
      });
    },
    // 自定义单选
    changeCurrentRow(val, rowIndex, row) {
      for (const indexs in this.tableData) {
        if (Number(indexs) === Number(rowIndex)) {
          this.tableData[indexs].checked = val;
        } else {
        // 加else判断因为数据如果是动态变换并切换时会不可取消选中
          if (this.tableData[indexs].checked === true) {
            this.tableData[indexs].checked = false;
          }
        }
      }
    },
}

求和、剩余本金效果图

单选效果图