vue使用Element UI时，el-table表格整行操作单选禁选并隐藏全选框

需求场景：

需求：表格复选修改为单选，只可选择一个；不满足条件的不可勾选；可进行整行操作

vue中的el-table布局：

注意使用的方法．

1.  
   <el-table
2.  
   ref="tableRef"
3.  
   :key="tableKey"
4.  
   :data="tableData"
5.  
   class="singleTable"
6.  
   @select="handleSelectionChange"
7.  
   @row-click="handleSelectionChange('',$event)">
8.  
   <el-table-column
9.  
   type="selection"
10.  
    width="45"
11.  
    align="center"
12.  
    :selectable="checkboxSelect"/>
13.  
    <el-table-column label="序号" width="60" show-overflow-tooltip align="center">
14.  
    <template slot-scope="scope">{{ scope.$index (page.pageNum - 1) *page.pageSize 1 }}</template>
15.  
    </el-table-column>
16.  
    <el-table-column prop="RANINSTASKNAME" label="名称" show-overflow-tooltip/>
17.  
    <el-table-column prop="ADDRESS" label="地址" show-overflow-tooltip/>
18.  
    </el-table>

单选样式

需求由复选改为单选后，左上角全选框要进行隐藏，复选框也变成单选框，这里是通过css样式进行调整的

1.  
   // 隐藏表头全选复选框
2.  
   //（主要目的就是隐藏全选复选框，亲测具体项目细节不同可能实现方式不同，如果不生效需要调整下）
3.  
   /deep/ .el-table thead { // 第一种
4.  
   .el-checkbox__input {
5.  
   display: none !important;
6.  
   }
7.  
   }
8.  
    
9.  
   /deep/ .el-table__header-wrapper .el-checkbox { // 第二种
10.  
    display: none !important;
11.  
    }
12.  
     
13.  
     
14.  
    //表格复选改为单选
15.  
    .singleTable {
16.  
    /* 修改复选框样式 变成单选框样式 */
17.  
    /deep/ .el-checkbox__inner {
18.  
    border: 1px solid #dcdfe6;
19.  
    border-radius: 100%;
20.  
    width: 14px;
21.  
    height: 14px;
22.  
    position: relative;
23.  
    cursor: pointer;
24.  
    display: inline-block;
25.  
    box-sizing: border-box;
26.  
    &::after {
27.  
    transform: translate(-50%, -50%) scale(1);
28.  
    width: 3px;
29.  
    height: 3px;
30.  
    border-radius: 100%;
31.  
    background-color: #fff;
32.  
    content: "";
33.  
    position: absolute;
34.  
    left: 50%;
35.  
    top: 50%;
36.  
    transition: transform 0.15s ease-in;
37.  
    }
38.  
    }
39.  
    }

勾选数据触发方法：

勾选复选框的select和整行操作的row-click可以共用同一个方法，但是要注意传参．select事件默认传参是（selection, row），而row-click触发事件的第一个默认传参是( row ),所以row-click时间在共用方法时要特殊传参（@row-click="handleSelectionChange('',$event)"）

1.  
   handleSelectionChange (selection, row) {
2.  
   if (row.noChoose) return //不满足条件数据不可操作
3.  
   this.$refs.tableRef.clearSelection()
4.  
   　　　　// 这里因为需求做的是必选一个，如有其他需求可做调整
5.  
   this.$refs.tableRef.toggleRowSelection(row, true)
6.  
   this.selections = row
7.  
   },

控制数据是否可勾选：

可以在selection中使用selectable参数的回调函数处理

1.  
   checkboxSelect (row) {
2.  
   //不符合条件的不允许勾选
3.  
   return !row.isChoose
4.  
   }

这篇好文章是转载于：学新通技术网