美文网首页
el-table表格合并行时多选框选中/取消单号相同数据

el-table表格合并行时多选框选中/取消单号相同数据

作者: 哒哒哒哒da | 来源:发表于2021-09-27 14:06 被阅读0次
效果:

1.勾选其中一个单号多选框,其他合并行自动也勾选。
2.取消其中一个合并行,其他单号相同合并行也取消勾选



重点:
ref="preTable"
@selection-change="handleSelectionChange"
@select="selectHandle"
@select-all="selectAllHandle"
this.$refs.preTable.toggleRowSelection(row, xxx);
this.$refs.preTable.clearSelection();
<template>
  <el-table
    :data="list"
    @selection-change="handleSelectionChange"
    @select="selectHandle"
    @select-all="selectAllHandle"
    ref="preTable"
  >
    <el-table-column type="selection" />
    <el-table-column prop="rcptNo" label="单号" />
    <el-table-column prop="itemName" label="项目名称" />
    <el-table-column prop="itemClass" label="类别" />
    <el-table-column prop="amount" label="收费数量" />
    <el-table-column prop="ktAmount" label="可退数量" />
    <el-table-column prop="refundAmount" label="申退数量" />
    <el-table-column prop="refundCharges" label="退费金额" />
    <el-table-column prop="charges" label="收费金额" />
    <el-table-column prop="refundReason" label="退费原因" />
    <el-table-column prop="refundedAmount" label="已退数量" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      // 选中数组
      multipleSelection: [],
      //  选中单号存放
      radios: []
    };
  },
  methods: {
    // 获取选中项目
    handleSelectionChange(val) {
      this.multipleSelection = this.$refs.preTable.selection || [];
    },
    // 点击全选操作
    selectAllHandle(selection) {
      for (let i = 0; i < selection.length; i++) {
        const ele = selection[i];
        if (ele.ktAmount <= 0) {
          this.toggleSelection();
          return this.$message.warning(
            "选择项目中存在可退数量为0,不可退费,请进行单击选择"
          );
        }
      }
    },
    // 勾选表格某一行数据
    selectHandle(selection, row) {
      // 取消其中一个选中的时候 默认取消同单号的选中
      if (!selection.includes(row)) {
        this.radios.push(row.rcptNo);
        this.pickUp(false);
      } else {
        if (row.ktAmount <= 0) {
          this.toggleSelection();
          return this.$message.warning("选择项目中存在可退数量为0,不可退费");
        }
        if (this.radios.includes(row.rcptNo)) {
          this.radios.splice(this.radios.indexOf(row.rcptNo), 1);
        } else {
          this.radios.push(row.rcptNo);
        }
        this.pickUp(true);
      }
    },
    // 需要默认勾选/取消的数据
    pickUp(bool) {
      let arr = [];
      this.list.forEach(item => {
        this.radios.forEach(val => {
          if (val === item.rcptNo) {
            arr.push(item);
          }
        });
      });
      this.toggleSelection(arr, bool);
    },
    // 默认选择/取消中的行
    toggleSelection(rows, bool) {
      if (rows) {
        this.$nextTick(() => {
          rows.forEach(row => {
            this.$refs.preTable.toggleRowSelection(row, bool);
          });
        });
      } else {
        this.$refs.preTable.clearSelection();
      }
    }
  }
};
</script>

相关文章

网友评论

      本文标题:el-table表格合并行时多选框选中/取消单号相同数据

      本文链接:https://www.haomeiwen.com/subject/eipxnltx.html