博客

需求场景：

最近在做的一个项目中有个需求，利用

Element-UI

组件中的

el-table

实现选择功能，官方提供了两种选择方式，一种是单选，一种是多选。我需要实现单选的效果，但是用过那个单选模式的都知道用户体验不是太好，不熟悉的人都不知道什么是选中状态，所以只能用多选模式来改。

实现方案：

第一步：监听

checkbox

的点击事件（选中和取消选中）

 <el-table
         :data="tableList.records"
         ref="myTable"
         stripe border
         row-key="id"
         :header-cell-style="headerClass"
         :cell-style="cellClass"
         @selection-change="handleSelectionChange"
 >
 <!-- 出现多选模式的selection选择框 只需要加上以下一行就可以 -->
 <el-table-column type="selection" width="50" align="center"></el-table-column>
  <!-- 剩余的是你需要展示的字段 -->
 </el-table>

第二步：利用

el-table

提供的方法处理数据

 handleSelectionChange(val) {
     // 若存在一条数据 再次点击 该函数会执行三次 若没有数据选中，执行一次
     // 第一次 选中状态 val中有两条数据 => 走if
     // 第二次 清空数据 val为空  => 不走if
     // 第三次 将最后一条数据设置为选中状态 val有一条数据 =>不走if
     this.selectedRows = val;
     if (val.length > 1) {
         this.$refs.myTable.clearSelection();
         this.$refs.myTable.toggleRowSelection(val.pop());
     }
     if(val.length != 0){
         this.selectProtocolId = val[val.length - 1].id;
     }
 },

解释一下上面的这个函数，

1. 
selectedRows

   用来接收选中的行数据，最后需要返回给父元素，
2. 
selectProtocolId

   用来解决数据回显的问题，第三步会讲到这一步为什么要修改
3. 
clearSelection

   用来清除所有选中的数据
4. 
toggleRowSelection

   用来切换某一行的状态，参数是某行的整条数据
   
   这样就能简单的利用多选模式的样式来实现单选

第三步：数据回显

上面两步已经能实现基本功能，这一步解决的是回显的问题。选中数据后，想要再次修改，存在一些小小的坑。

this.tableList.records.forEach((item,index) => {
    if(item.id == this.selectProtocolId){
        this.$nextTick(() => {
            this.$refs.myTable.toggleRowSelection(item);
        })
    }
})

1. 想要展示选中的数据，首先得与数据源进行比较，
   
tableList.records

   是分页拿到的数据。
2. 
selectProtocolId

   的初始值是props中传递过来的一个参数（无法修改props属性的值，只能用一个中间变量来控制），代表上一次保存的数据。往后每次点击切换的时候，都需要动态的更新这个值（第二步中提到的内容），否则就会出现某两页都有数据被选中的情况，因为不改变selectProtocolId的值，总会有某页的某条数据与之匹配
3. 
$nextTick

   确保在DOM更新时切换数据选中状态的代码能正常执行，否则直接执行，无法设置选中状态

第四步：禁用全选功能

/deep/ .el-table__header-wrapper  .el-checkbox{
    //找到表头那一行，然后把里面的复选框隐藏掉
	display:none
}

表头中有个全选的按钮，这个按钮的功能也需要进行处理，最简单的就是利用

CSS

样式给这个按钮隐藏掉