elementui的table的@selection-change阻止事件改变

说明:

最近有个不想说的(xxx)业务,在表格勾选每一行的时候要触发一系列查询功能,查询失败还要把那个勾勾回退。真实蛋疼!表格勾选的默认@selection-change是change事件,一般change事件是在完成之后才触发,不能在触发之前进行阻止操作。想了想,查了查,各种神仙操作,算了不看了脑瓜疼!就想通el-checkbox来代替表格原生的@selection-change事件咯,反正都是多选!安排!

1、案例

java 复制代码
<el-table
    ref="multipleModeTable"
    :data="modeList"
    tooltip-effect="dark"
    height="200"
    style="width: 100%;">
    <el-table-column
    type="selection"
    width="55">
    <template slot-scope="scope">
        <el-checkbox v-model="scope.row.ischeck" @click.native.prevent="handleSelectionChange(scope.row)"></el-checkbox>
    </template>
    </el-table-column>
    <el-table-column
    :label="$t('message.label_mode_chs')">
    <template slot-scope="scope">{{ scope.row.mode }}</template>
    </el-table-column>
</el-table>

//-----------多测试多体验-------------
handleSelectionChange(e){
    // 做其他相关操作...
    // 不想勾选就返回false
    return false
}

特此记录,已便下次快速的拷贝!

相关推荐
wyzqhhhh7 分钟前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富14 分钟前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的30 分钟前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人43 分钟前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
xw51 小时前
移动端调试上篇
前端
伍哥的传说1 小时前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达1 小时前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing1 小时前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy1 小时前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码1 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js