el-table多选样式实为单选效果

最新推荐文章于 2025-05-29 15:35:46 发布

周舸洺

最新推荐文章于 2025-05-29 15:35:46 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/zhaou_csdn/article/details/126347728

web前端专栏收录该内容

13 篇文章

订阅专栏

在实际前端开发中，el-table单选若通过点选每行实现较麻烦，自己在列表中加el-radio也繁琐。可利用自带多选功能，在多选框改变的@selection-change方法中按特定代码写法实现单选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实际开发中，el-table的单选是通过点选每一行来实现的，自己在列表中加入el-radio又略显麻烦。于是可以用自带的多选，在多选框改变的@selection-change方法中按照上面代码写法，即可实现

<el-table
    ref="multipleTable"
    :data="tableData"
    @selection-change="handleSelectionChange"
>
    <el-table-column
        type="selection"
        align="center"
        width="55"
    />
    <el-table-column
        align="center"
        prop="templateName"
        label="模板名称"
    />
</el-table>

handleSelectionChange(selection) {
    if (selection.length > 1) {
        this.$refs.multipleTable.clearSelection()
        this.$refs.multipleTable.toggleRowSelection(selection.pop())
    } else if (selection.length === 1) {
        this.checkedRow = selection.pop()
    } else {
        this.checkedRow = {}
    }
},