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