• elementPlus表格组件el-table实现只能同时选择一行,全选按第一行处理


    目录

    需求背景:

    具体实现:

    模板代码:

    函数处理代码:

    代码讲解:


    需求背景:

    点击表格最左侧的复选框列,选中当前表格行,而且只允许选择一行,选中一行后,其他行自动禁用。若点击全选,则默认选择表格第一行。

    具体实现:

    模板代码:

    1. <el-table
    2. :data="allTest"
    3. style="width: 100%;"
    4. @selection-change="handleSelectionChange1"
    5. >
    6. <el-table-column type="selection" width="85" :selectable="handleSelectable" />
    7. <el-table-column property="topicName" label="测试试题" width="250" />
    8. <el-table-column property="sum" label="题目总数" width="250" />
    9. el-table>
    10. <template #footer>
    11. <span class="dialog-footer">
    12. <el-button @click="dialogFormVisible1 = false">取消el-button>
    13. <el-button type="primary" @click="SelectionTopic">
    14. 确认
    15. el-button>
    16. span>
    17. template>

    函数处理代码:

    代码讲解:

    • selectedRow 是一个用于记录选中的试题的引用。在 handleSelectionChange1 方法中,通过监听表格的选中事件,当选中的行发生变化时,将选中的第一行赋值给 selectedRow.value
    • handleSelectable 方法用于判断是否可以选中某一行。如果没有选中任何行,则所有行都可选,否则只有与当前选中行的 topicName 相同的行可选。(为了禁用其他行)
    • SelectionTopic 方法是确认按钮的点击事件处理函数。在该方法中,首先判断 selectedRow.value 是否存在,即是否有选中的行。如果存在,则将选中的行数据赋值给 Selection1.value,并关闭对话框或表单(通过 dialogFormVisible1.value = false)。如果不存在选中的行,则弹出提示窗“请选择试题!”(通过使用 Element Plus 的 Message 组件)。

  • 相关阅读:
    Danielle Foré 近日向 9to5Linux 通报了 elementary OS 7.1 的发布和全面可用性
    17-VMware Horizon 2203 虚拟桌面-Win10 手动桌面池浮动(十七)
    2019ICPC南京站
    记录一个爬虫过程,从基础爬虫到逆向,再到jsrpc,再到selenium,啥都包括了
    华为机试题练习-HJ16 购物单
    Rocky linux8.8系统通过packstack安装OpenStack yoga版本
    Java实习生面试题汇总
    Go基础12-理解Go语言表达式的求值顺序
    黔院长 | 邀您一同共筑养生健康项目!
    AST反混淆插件|如何删除多余的window标识
  • 原文地址:https://blog.csdn.net/qq_62799214/article/details/133521764