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

最新推荐文章于 2024-08-06 10:11:58 发布

周舸洺

最新推荐文章于 2024-08-06 10:11:58 发布

阅读量1.3k

点赞数

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

本文链接：https://blog.csdn.net/zhaou_csdn/article/details/126347728

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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