vue使用element ui---Table 表格的全选、单选翻页亦是选中状态

1.页面

<el-table
   ref="multipleTable"
    :data="tableData"
    border
    :row-key="getRowKeys"
    //状态条件筛选事件
    @filter-change="handleFilterChange"
    //时间排序筛选事件
    @sort-change="changeTableSort"
    //全选事件
    @selection-change="handleSelectionChange">
    //全选和单选
    <el-table-column type="selection" :selectable='checkboxT' :reserve-selection="true" min-width="6%"></el-table-column>
    //其他
    <el-table-column label="序号" align="center" width="100">
      <template slot-scope="scope">
        <span v-text="getIndex(scope.$index)"> </span>
      </template>
    </el-table-column>
    <el-table-column label="激活码" prop="code" align="center" min-width="13%"></el-table-column>
    <el-table-column prop="create_time" :resizable="false" label="生成时间" sortable='custom' min-width="11%">
      <template slot-scope="scope">
        <span>{{ scope.row.create_time}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="act_time" :resizable="false" label="激活时间" sortable='custom' min-width="11%">
      <template slot-scope="scope">
        <span>{{ scope.row.act_time}}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="source"
      column-key="source"
      label="生成方式"
      min-width="10%"
      :filter-multiple="false"
      :filters="[{ text: '文章投稿', value: '10' }, { text: '批量发送', value: '20' }, { text: '系统激活', value: '30' }]"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag == '文章投稿' ? 'primary' : ''"
          :class="'is_use' + scope.row.source"
          disable-transitions>{{scope.row.card_source}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="is_use"
      column-key="is_use"
      label="使用状态"
      min-width="10%"
      :filter-multiple="false"
      :filters="[{ text: '已使用', value: '1' }, { text: '未使用', value: '0' }]"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag == '已使用' ? 'primary' : ''"
          :class="'is_use' + scope.row.is_use"
          disable-transitions>{{scope.row.use_name}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="激活用户" prop="member_name" align="center" min-width="13%"></el-table-column>
    <el-table-column
      prop="is_issue"
      column-key="is_issue"
      label="发放状态"
      min-width="10%"
      :filter-multiple="false"
      :filters="[{ text: '未发放', value: '10' }, { text: '已发放', value: '20' }]"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.tag == '已激活' ? 'primary' : ''"
          :class="'is_issue' + scope.row.is_issue"
          disable-transitions>{{scope.row.issue_name}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="发放人" prop="user_name" align="center" min-width="13%"></el-table-column>
  </el-table>
  <el-pagination
    style="margin-top: 25px; text-align:right;"
    layout="total, sizes, prev, pager, next, jumper"
    :page-sizes="[5, 10, 15, 20]"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange">
  </el-pagination>

2.dom部分

data () {
	return {
		multipleSelection: [],
		select_order_number: '',
	}
}

2.1已导出的部分禁用选框

checkboxT(row, index){
  if(row.is_use == 1){
    return 0;
  }else{
    return 1;
  }
},

2.2全选和单选

handleSelectionChange(rows) {
  this.multipleSelection = rows;
  this.select_order_number = this.multipleSelection.length;

  this.selectArr = [];
  if (rows) {
    rows.forEach(row => {
      if (row) {
        this.selectArr.push(row.id);
      }
    });
  }
},

3.效果图