Vue elementUI 多选表格实现单选操作

最新推荐文章于 2026-05-11 11:16:25 发布

原创最新推荐文章于 2026-05-11 11:16:25 发布 · 1.2k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

收录于

Vue面试题专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用ElementUI组件库，将一个多选表格转换为单选模式。详细讲解了相关配置和事件监听，帮助开发者理解在表格交互中的单选操作实现。

<el-table :data="tableData" select="selectChoose" v-loading="loading" style="width: 100%" ref="multipleTable">
    <el-table-column type="selection"></el-table-column>
</el-table>

//clearSelection：用于多选表格，清空用户的选择
//toggleRowSelection用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
selectchoose(selection,row){//当checkbox改变时触发
    console.log( "row",row)
    //当点击时selection会存放当前行数据
    this.$refs.multipleTable.clearSelection();//先清空选中状态，selection值还在
    if (selection.length === 0){//这里状态为勾选
        return;
    }
    this.$refs.multipleTable.toggleRowSelection(row,true);//用于切换某行选中状态
}