0


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

需求场景:

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


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>

单选样式

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

// 隐藏表头全选复选框 
//(主要目的就是隐藏全选复选框,亲测具体项目细节不同可能实现方式不同,如果不生效需要调整下)
/deep/ .el-table thead {   // 第一种
  .el-checkbox__input {
    display: none !important;
  }
}

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

//表格复选改为单选
.singleTable {
  /* 修改复选框样式 变成单选框样式 */
  /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;
    }
  }
}

勾选数据触发方法:

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

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

控制数据是否可勾选:

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

checkboxSelect (row) {
      //不符合条件的不允许勾选
      return !row.isChoose
    }
标签: ui 前端 vue.js

本文转载自: https://blog.csdn.net/weixin_55977434/article/details/131089724
版权归原作者 钱多多810 所有, 如有侵权,请联系我们删除。

“vue使用Element UI时,el-table表格整行操作单选禁选并隐藏全选框”的评论:

还没有评论