需求場景：

需求：表格復(fù)選修改為單選，只可選擇一個(gè)；不滿足條件的不可勾選；可進(jìn)行整行操作

vue中的el-table布局：

注意使用的方法．

<el-table
 ref="tableRef"
 :key="tableKey"
 :data="tableData"
 class="singleTable"
 @select="handleSelectionChange"
 @row-click="handleSelectionChange('',$event)">
   <el-table-column
    type="selection"
    width="45"
    align="center"
    :selectable="checkboxSelect"/>
   <el-table-column label="序號" width="60" show-overflow-tooltip align="center">
      <template slot-scope="scope">{{ scope.$index + (page.pageNum - 1) *page.pageSize + 1 }}</template>
      </el-table-column>
   <el-table-column prop="RANINSTASKNAME" label="名稱" show-overflow-tooltip/>
   <el-table-column prop="ADDRESS" label="地址" show-overflow-tooltip/>
</el-table>

單選樣式

需求由復(fù)選改為單選后，左上角全選框要進(jìn)行隱藏，復(fù)選框也變成單選框，這里是通過css樣式進(jìn)行調(diào)整的

// 隱藏表頭全選復(fù)選框 
//（主要目的就是隱藏全選復(fù)選框，親測具體項(xiàng)目細(xì)節(jié)不同可能實(shí)現(xiàn)方式不同，如果不生效需要調(diào)整下）
/deep/ .el-table thead {   // 第一種
  .el-checkbox__input {
    display: none !important;
  }
}

/deep/ .el-table__header-wrapper .el-checkbox { // 第二種
  display: none !important;
}


//表格復(fù)選改為單選
.singleTable {
  /* 修改復(fù)選框樣式 變成單選框樣式 */
  /deep/ .el-checkbox__inner {
    border: 1px solid #dcdfe6;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    &::after {
      transform: translate(-50%, -50%) scale(1);
      width: 3px;
      height: 3px;
      border-radius: 100%;
      background-color: #fff;
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      transition: transform 0.15s ease-in;
    }
  }
}

勾選數(shù)據(jù)觸發(fā)方法：

勾選復(fù)選框的select和整行操作的row-click可以共用同一個(gè)方法，但是要注意傳參．select事件默認(rèn)傳參是（selection, row），而row-click觸發(fā)事件的第一個(gè)默認(rèn)傳參是( row ),所以row-click時(shí)間在共用方法時(shí)要特殊傳參（@row-click="handleSelectionChange('',$event)"）

 handleSelectionChange (selection, row) {
      if (row.noChoose) return  //不滿足條件數(shù)據(jù)不可操作
      this.$refs.tableRef.clearSelection()
　　　　// 這里因?yàn)樾枨笞龅氖潜剡x一個(gè)，如有其他需求可做調(diào)整
      this.$refs.tableRef.toggleRowSelection(row, true)    
      this.selections = row
    },

控制數(shù)據(jù)是否可勾選：

可以在selection中使用selectable參數(shù)的回調(diào)函數(shù)處理文章來源地址http://www.zghlxwxcb.cn/news/detail-629857.html

checkboxSelect (row) {
      //不符合條件的不允許勾選
      return !row.isChoose
    }

到了這里，關(guān)于vue使用Element UI時(shí)，el-table表格整行操作單選的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！