持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

1、表格跨页保存选中状态

业务需求如下

需要用到的element配置

1.场景

在项目中，使用element table表格组件，常常会用到单选多选行数据的场景，一般都与分页组件配合。发送页码，每页数据的条数作为参数发送请求，后端来返回相应的数据，前端再将数据渲染到页面上。

2.问题抛出

当我们需要选中一行或多行数据，进行增删改查，甚至更多的操作时，就需要进行给table组件配置多选，

• 但当我们勾选中当前页的某行数据时，再跳转到下一页或者切换当前页展示的数量时，向数据库发送请求，就会刷新我们上一页的勾选状态，导致无法保存我们已经勾选的数据。

2、代码展示

      <!-- 文章表格区域 -->
      <el-table :data="ArticleList" style="width: 100%" border  ref="drawTable"   @selection-change="handleSelectionChange" :row-key="getKey">
        <el-table-column
        :reserve-selection="true"
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column prop="title" label="文章标题">
          <template v-slot="{ row }">
            <el-link type="primary" @click="showDetail(row.id)">{{
              row.title
            }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cate_name" label="文章分类"> </el-table-column>
        <el-table-column prop="pub_date" label="发布时间">
          <template v-slot="{ row }">
            {{ formatData(row.pub_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="danger" size="mini" @click="deleteArticle(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      
    // script 中methods中的方法
        getKey (row) {
          if (row.id) {
            return row.id
          }
       },
       cleanLine() {
         // 清除表格选中
         this.$refs.drawTable.clearSelection();
   	},

3、功能实现

1、给table组件添加 @selection-change :row-key="getKey" 绑定 ref

• 利用:row-key="getKey" 给每行数据都绑定了一个唯一值
• 利用:reserve-selection="true" 给多选框添加了记忆功能，可以保存勾选的状态

注意这个getKey函数返回的id，是因为我数据里的id是唯一值,因此绑定的值应该根据返回的数据来设置

<el-table :data="ArticleList" style="width: 100%" border  ref="drawTable"   @selection-change="handleSelectionChange" :row-key="getKey">
<el-table-column
      :reserve-selection="true"
      type="selection"
      width="55">
        getKey (row) {
          if (row.id) {
            return row.id
          }
       },

2、清除勾选状态

问题抛出：

• 跨页勾选的功能已经完成，但是在正常逻辑下，当我们刷新页面或者重置功能时，我们需要清除所有行的已勾选状态。
• 但由于我们在做跨页保存勾选状态的时候，每行数据都绑定了一个唯一值并且给勾选框那一列加上了记忆功能，所以就算刷新也不会将勾选状态清除

问题解决：

       cleanLine() {
         // 清除表格选中
         this.$refs.drawTable.clearSelection();
   	},

• 我们可以使用 table 组件的 clearSelection函数,将每行的勾选状态清除(调用位置自选)
• 如果在父组件中调用子组件的clearSelection（），可能会报错，报错无法读取 clearSelection（）,那么就需要使用 this.$nextTick 来解决

    this.$nextTick(() => {
       this.$refs.ruleForms.cleanLine();
     });

2、表格全选按钮的显示与隐藏

1.场景

在组件封装时，我们二次封装element table 组件，全选按钮的显示或隐藏应该由父组件进行配置，以达到灵活复用的目的

2.功能实现

• 我们可以利用CSS diplay 的显示隐藏来实现这个功能

子组件

  // 给el-table标签添加`:header-cell-class-name`配置
   <el-table :header-cell-class-name="cellClass">
        
    // 表格是否显示全选框
    showRadio: {
      type: Boolean,
      default: false,
    }
    
 // 关闭全选框
    cellClass(row) {
      if (row.columnIndex === 0 && !this.showRadio) return "disabledCheck";
    },
  
  // CSS 部分
 .el-table /deep/.disabledCheck .cell .el-checkbox__inner {
    display: none !important;
  }

父组件

父组件直接可以 :showRadio=true/false来控制全选框的开启与关闭