vue之ele中的table组件（针对分页的时候，记录之前或者之后的勾选状态 复选框的回显和重置）

• 就是勾选了所有，或者勾选了某一行之后，切换下一页也记录之前的勾选的数据 + 切换回之前页数时候，回显之前的数据
• 点击重置的时候，清空勾选！
  
  主要参数：
  

DSupplementTable.vue组件

<template>
  <div class="table_wrap">
    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      border
      :row-class-name="tableRowClassName"
      :header-cell-style="{
        background: '#e82323',
        color: '#fff',
        textAlign: 'center',
      }"
      style="width: 1786px"
      :row-key="getRowKeys"
      @selection-change="handleChange"
      :cell-style="{ padding: '5px 0 5px 0' }"
    >
      <template v-for="(item, idx) in tableConfig">
        <el-table-column
          v-if="item.type"
          :key="idx"
          :type="item.type"
          :reserve-selection="true"
          :label="item.label ? item.label : ''"
          :width="item.width ? item.width : ''"
          :align="item.align ? item.align : ''"
        >
        </el-table-column>
        <el-table-column
          v-else
          :key="idx"
          :label="item.label ? item.label : ''"
          :width="item.width ? item.width : ''"
          :prop="item.prop ? item.prop : ''"
          :show-overflow-tooltip="
            item.showOverFlowTooltip ? item.showOverFlowTooltip : ''
          "
          :align="item.align ? item.align : ''"
        >
          <template slot-scope="scope">
            <div v-if="item.numFlag">
              {{ numberStandard(scope.row[item.prop]) }}
            </div>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import { numStandard } from "@/utils/tool.js";
export default {
  name: "DSupplementTable",
  components: {},
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableConfig: {
      type: Array,
      default: () => [],
    },
    tableclickRowConfig: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    resetTable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      firstIN: "",
      superviseDate: [],
    };
  },
  watch: {
    // 重置 已经选中的行列
    resetTable(newV) {
      if (newV) {
        this.$refs.multipleTable.clearSelection();
        this.$emit("resetTableStatus", false);
      }
    },
  },
  methods: {
    //金额千分位化
    numberStandard(val) {
      return numStandard(val);
    },
    //给行设置一个固定的className,利用该className给行加样式
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "row_color";
      } else {
        return "row_color_none";
      }
    },
    getRowKeys(row) {
      return row.electricDraftId;
    },
    handleChange(arr) {
      this.$emit("tableMultipleSelection", arr);
    },
  },
};
</script>
<style  lang="scss" scoped>
// 单行颜色
::v-deep .row_color {
  background: #f0f4ff !important;
}
// 双行颜色
::v-deep .row_color_none {
  background: #ffffff !important;
}
// 修改表格头
::v-deep .el-table__header-wrapper {
  .cell {
    padding: 0 !important;
  }
  max-height: 40px;
  overflow: hidden;
}
::v-deep .el-table__body-wrapper{
    overflow-y: auto;
    width: 101%;
}
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  ::v-deep .el-table__body-wrapper{
    max-height: 22.5rem;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1680px) {
  ::v-deep .el-table__body-wrapper{
    max-height: 26.5rem;
  }
}
@media screen and (max-width: 1599px) {
  ::v-deep .el-table__body-wrapper{
    max-height: 25rem;
  }
}
</style>

使用该组件

• html

      <DSupplementTable
        :resetTable="resetTable"
        @resetTableStatus="resetTableStatus"
        :loading="loading"
        :tableData="tableData"
        :tableConfig="tableConfig"
        @tableMultipleSelection="tableMultipleSelection"
      />

• data

checkArr :[],
checkArrIds :[],
resetTable:false, // 是否重置
      loading: false,
      tableData: [],
      tableConfig: [
        { label: "序号", type: "index", width: "50" },
        { type: "selection", width: "50", align: "center" },
        {
          label: "客户名称",
          prop: "rcvName",
          width: "240",
          showOverFlowTooltip: true,
        },
      ],

• methods

    // 点击table选 数据
    tableMultipleSelection(arr) {
      // console.log('table选中的数据', arr);
      this.checkArr = [];
      this.checkArr = deepCopy(this.checkArr,arr);
      let checkArrIds = [];
      if (arr && arr.length > 0) {
        arr.forEach((item) => {
          if (item.electricDraftId) {
            checkArrIds.push(item.electricDraftId);
          }
        });
      }
      this.checkArrIds = checkArrIds;
    },
    resetTableStatus(flag){
      this.resetTable = flag;
    },
    // 重置
    reset() {
      this.resetTable = true;
      this.checkArr = [];
      this.checkArrIds = [];
      this.tableData = [];
      this.getTable({});
    },

数据初始化的时候，勾选当前的数据

<template>
  <el-table
    v-loading="loading"
    ref="multipleTable"
    :data="tableData"
    border
    :row-class-name="tableRowClassName"
    :header-cell-style="{
      background: '#e82323',
      color: '#fff',
      textAlign: 'center',
    }"
    style="width: 100%"
    :row-key="getRowKeys"
    @selection-change="handleSelectionChange"
    :cell-style="{ padding: '5px 0 5px 0' }"
  >
    <template v-for="(item, idx) in tableConfig">
      <el-table-column
        v-if="item.type"
        :key="idx"
        :type="item.type"
        :reserve-selection="true"
        :label="item.label ? item.label : ''"
        :width="item.width ? item.width : ''"
        :align="item.align ? item.align : ''"
      >
      </el-table-column>
    </template>
  </el-table>
</template>

  mounted(){
    this.init();
  },
  methods: {
    init() {
      if (this.inputChangeType === "modifyApplyContractTable") {
        // 初始化之中的 勾选的table选项
        let initSelect = [];
        this.$nextTick(() => {
          if ( this.tableData && this.tableData.length > 0 ) {
            // 一开始请求数据的时候 勾选复选框
            for ( var k = 0; k < this.tableData.length ; k ++ ) {
              if ( this.tableData[k].rtnDate && this.tableData[k].rtnAmt ) {
                this.$refs.multipleTable.toggleRowSelection(this.tableData[k]);
                if ( k < this.tableData.length ) {
                  initSelect.push(this.tableData[k])
                } else {
                  return ;
                }
              }
            }
            this.$emit("initSelect", initSelect)
            // console.log("我是厨师initSelect",initSelect );
          }
        })
      }
    },
 }