ElementUI表格實現只能單選效果


ElementUI表格實現只能單選效果

設置樣式隱藏表格全選

<style>
.single-select-table thead .el-table-column--selection .cell {
  display: none;
}
</style>

table設置隱藏全選樣式,加上@selection-change="handleSelectionChange"實現單選,ref設置個table作為ref引用

<el-table :data="page.rows" ref="table" border tooltip-effect="light" @selection-change="handleSelectionChange" class="single-select-table">
        <!--選擇框勾選-->
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="產品編碼" prop="objId"></el-table-column>
        <el-table-column label="xml" prop="fileCName"></el-table-column>
        <el-table-column label="創建人" prop="creator"></el-table-column>
        <el-table-column label="創建時間" prop="createTime"></el-table-column>
        <el-table-column label="修改人" prop="modifier"></el-table-column>
        <el-table-column label="修改時間" prop="modifyTime"></el-table-column>
      </el-table>

handleSelectionChange方法具體實現

handleSelectionChange(rows) {
      if (rows.length > 1) {
        this.$refs.table.clearSelection()
        this.$refs.table.toggleRowSelection(rows.pop())
      }
    },


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM