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

最新推荐文章于 2025-03-21 17:13:40 发布

原创最新推荐文章于 2025-03-21 17:13:40 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

web前端专栏收录该内容

13 篇文章

订阅专栏

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

在实际开发中，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 = {}
    }
},