element-ui ： <el-table> 按钮点击操作阻止@row-click

阻止Vue表格行点击事件

最新推荐文章于 2024-01-12 14:14:05 发布

转载最新推荐文章于 2024-01-12 14:14:05 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mlllily/p/10796782.html

文章标签：

#ui #javascript #ViewUI

描述：<el-table> 点击行时，会跳转到一个详细信息页面，但是同时这一行也有编辑和删除按钮。

问题：在点击按钮时，@row-click事件也被触发了，而我并不想触发 row-click 事件

解决办法：写按钮的 @click 事件时添加 .stop

<el-button type="text" @click.stop="deleteVisible = true"><i class="el-icon-delete el-icon--right"></i></el-button>

参考：https://blog.youkuaiyun.com/qq_36437172/article/details/88779425

转载于:https://www.cnblogs.com/mlllily/p/10796782.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30813225

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Element ui组件库的Table表格阻止了点击事件冒泡

gzy07011的博客

12-14

840

在表格中操作一列有删除，给删除按钮注册了点击事件，但是同时还给表格的每一行注册了点击事件（项目需要在点击每一行时跳转到对应的动态路由地址），之后就发生了在点击删除按钮时，不仅触发删除按钮绑定的点击事件，还触发了表格当前这一行的点击事件(跳转)。事件修饰符，阻止了点击事件冒泡，这样在点击删除按钮时就不会触发行点击事件了。使用的是Element ui组件库的Table表格。方法中可以处理相应的删除逻辑。我们在删除按钮上使用了。

element-ui按钮禁用效果实现

啥也不是

11-25

9279

element-ui中的按钮禁用状态是一个红色的禁用标志，实现方式很简单。 1.功能上禁用：即无法点击 <div class="test" disabled="disabled"></div> 2.展示效果 .test{ cursor:not-allowed; } ...

参与评论您还未登录，请先登录后发表或查看评论

element-ui ：＜el-table＞按钮点击操作阻止@row-click

weixin_45102016的博客

08-05

968

描述：点击行时，会跳转到一个详细信息页面，但是同时这一行也有编辑和删除按钮。问题：在点击按钮时，@row-click事件也被触发了，而我并不想触发 row-click 事件解决办法：写按钮的 @click 事件时添加 .stop <el-button class="button" size="mini" type="primary" @click.stop="edit(scope.row)">编辑</el-button> ...

element-ui el-table表格勾选框条件禁用，及全勾选按钮禁用，记录

热门推荐

xh1506101064的博客

01-12

1万+

表格的部分内容是可以被勾选的，部分内容是不可以被勾选的使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的。

elementUI里的button使用disabled属性

苦瓜_小学生的博客

11-18

5431

学习记录：实现在table列表中控制二次点击按钮时对应行的button为不可点击，效果图如下： 1.el-table在表格按钮标签中定义disabled属性 HTML部分代码： <div id="app"> <el-table :data="showTableData" <el-table-column fixed="right" label="操作"

<el-row style="margin-top:20px"> <el-form :inline="true" label-width="100px"> <el-row> <el-col :span="24"> <trible-time-range-picker v-on:trible-date-picker-event="tribleDatePickerEvent"></trible-time-range-picker> </el-col> </el-row> <el-row> <el-form-item label="EE Section" prop="EE_section" > <el-select v-model="Search.EE_section" clearable multiple collapse-tags placeholder="默认全选" > <el-option v-for="item in BaseOption.EE_section" :key="item.value_1" :label="item.label" :value="item.value_1"> </el-option> </el-select> </el-form-item> <el-form-item label="PE Section" prop="PE_section"> <el-select v-model="Search.PE_section" clearable multiple collapse-tags placeholder="默认全选" > <el-option v-for="item in BaseOption.PE_section" :key="item.value_1" :label="item.label" :value="item.value_1"> </el-option> </el-select> </el-form-item> <el-form-item label="Tool ID" prop="EQP"> <el-select v-model="Search.EQP" clearable multiple collapse-tags filterable placeholder="默认全选"> <el-option v-for="item in BaseOption.EQP" :key="item.value_1" :label="item.label" :value="item.value_1"> </el-option> </el-select> </el-form-item> <el-button type="primary" v-on:click="query">查询</el-button> <el-button type="primary" v-on:click="Export">导出</el-button> </el-row> </el-form> </el-row>解释这段代码

08-05

- 实现效果：所有Element UI组件可在项目中直接使用（如`<el-button>`、`<el-table>`等）[^3] 2. **组件化开发** ```html <template> <el-container> <el-header>导航栏</el-header> <el-main> <el-table :...

<template> <div class="content-wrapper">  <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item>健康体检管理</el-breadcrumb-item> </el-breadcrumb>  <el-button type="success" @click="exportData" style="margin-bottom: 20px;">导出</el-button>  <el-form :inline="true" class="demo-form-inline"> <el-form-item label="体检时间"> <el-date-picker v-model="filter.startDate" type="date" placeholder="开始日期"> </el-date-picker> <el-date-picker v-model="filter.endDate" type="date" placeholder="结束日期"> </el-date-picker> </el-form-item> <el-form-item label="体检地点"> <el-select v-model="filter.location" placeholder="请选择"> <el-option v-for="item in locations" :key="item" :label="item" :value="item"> </el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="search">查询</el-button> <el-button type="primary" @click="reset">重置</el-button> </el-form-item> </el-form>  <el-table :data="plans" style="width:100%"> <el-table-column prop="name" label="体检名称" width="180"></el-table-column> <el-table-column prop="time" label="体检时间" width="180"></el-table-column> <el-table-column prop="location" label="体检地点" width="180"></el-table-column> <el-table-column prop="standard" label="体检标准" width="180"></el-table-column> <el-table-column prop="remarks" label="备注" width="180"></el-table-column> <el-table-column label="体检人员" width="180"></el-table-column> <el-table-column label="操作" width="180"> <template slot-scope="scope"> <el-button size="mini" @click="editPlan(scope.$index, scope.row)">修改</el-button> <el-button size="mini" type="danger" @click="deletePlan(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </div> </template> <script> import axios from 'axios'; export default { data() { return { filter: { startDate: '', endDate: '', location: '', status: '' }, locations: [], plans: [] }; }, created() { this.loadLocations(); this.fetchPlans(); }, methods: { loadLocations() { axios.get('/api/health-plans/locations').then(response => { this.locations = response.data; }); }, fetchPlans() { axios.get('/api/health-plans', { params: this.filter }).then(response => { this.plans = response.data; }); }, search() { this.fetchPlans(); }, reset() { this.filter = { startDate: '', endDate: '', location: '', status: '' }; this.fetchPlans(); }, exportData() { window.open('/api/health-plans/export'); }, editPlan(index, plan) { console.log('编辑体检计划', plan); }, deletePlan(index, plan) { axios.delete(`/api/health-plans/${plan.id}`).then(() => { this.plans.splice(index, 1); this.$message.success('删除成功'); }).catch(() => { this.$message.error('删除失败'); }); } } }; </script> <style scoped> .content-wrapper { margin: 20px 40px; /* 向右下方移动 */ } .demo-form-inline { margin-bottom: 20px; } </style> 在此段代码基础上加上新增按钮，按钮点击弹出后关联另外一个vue

最新发布

09-11

要在包含面包屑导航、导出按钮、筛选表单和体检计划列表的 Vue 代码基础上添加新增按钮并实现点击弹出关联的另一个 Vue 组件，可按如下步骤操作： ### 1. 新增按钮在 Vue 模板里添加一个按钮元素。比如在合适的...

<template> <div> <div>  <el-input v-model="name" placeholder="请输入菜单名称" style="width: 200px" prefix-icon="el-icon-user"></el-input> <el-button class="el-icon-search" style="margin-left: 10px" type="primary" @click="load">查询</el-button> <el-button class="el-icon-refresh" style="margin-left: 10px" type="warning" @click="reset">重置</el-button> </div> <div style="margin-top: 20px;margin-bottom:35px;">  <el-button class="el-icon-plus" style="margin-right: 10px" type="success" @click="save(null)">新增</el-button> <el-button class="el-icon-close" style="margin-left: 10px" type="danger" @click="deleteByids" >批量删除</el-button> </div> <el-table :data="tableData" border stripe :header-cell-style="getRowClass" @selection-change="handleSelectionChange" row-key="id" border default-expand-all> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="id" label="id"></el-table-column> <el-table-column prop="name" label="菜单名称"></el-table-column> <el-table-column prop="path" label="菜单路径"></el-table-column> <el-table-column prop="icon" label="菜单图标"> <template v-slot:default="scope"> <i :class="scope.row.icon"></i> </template> </el-table-column> <el-table-column prop="pagePath" label="页面路径"></el-table-column> <el-table-column prop="description" label="菜单描述"></el-table-column> <el-table-column prop="sortNum" label="排序"></el-table-column> <el-table-column label="操作" width="300"> <template v-slot="scope"> <div class="action-buttons">  <el-button type="success" size="mini" class="compact-btn" @click="save(scope.row.id)" v-if="!scope.row.pid && !scope.row.path">新增子菜单</el-button> <el-button type="prima

03-29

<think>好的，我现在需要处理用户关于Vue.js中Element UI表格组件使用的问题，特别是涉及操作按钮如新增、删除、查询和重置的示例代码。首先，我需要回顾用户提供的引用内容，确保回答符合他们的需求。根据引用[1]...

<template> <div> <div class="search"> <el-input placeholder="请输入标题查询" style="width: 200px" v-model="name"></el-input> <el-button type="info" plain style="margin-left: 10px" @click="load(1)">查询</el-button> <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button> </div> <div class="operation"> <el-button type="primary" plain @click="handleAdd">考试安排</el-button> <el-button type="danger" plain @click="delBatch">批量删除</el-button> </div> <div class="table"> <el-table :data="tableData" stripe @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center"></el-table-column> <el-table-column prop="id" label="序号" width="80" align="center" sortable></el-table-column> <el-table-column prop="courseName" label="考试课程" show-overflow-tooltip></el-table-column> <el-table-column prop="teacherName" label="监考老师" show-overflow-tooltip></el-table-column> <el-table-column prop="roomName" label="考试教室" show-overflow-tooltip></el-table-column> <el-table-column prop="examTime" label="考试时间" show-overflow-tooltip></el-table-column> <el-table-column prop="time" label="创建时间"></el-table-column> <el-table-column label="操作" width="180" align="center"> <template v-slot="scope"> <el-button plain type="primary" @click="handleEdit(scope.row)" size="mini">编辑</el-button> <el-button plain type="danger" size="mini" @click=del(scope.row.id)>删除</el-button> </template> </el-table-column> </el-table> <div class="pagination"> <el-pagination background @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next" :total="total"> </el-pagination> </div> </div>

03-20

<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button> </template> </el-table-column> </el-table>  <el-pagination background class="pagination" :current-...

type="primary" 63: plain 64: icon="el-icon-plus" 65: size="mini" 66: @click="handleAdd" 67: 关键词所在行 --> v-hasPermi="['system:dict:add']" 68: >新增</el-button> 69: </el-col> 70: <el-col :span="1.5"> 71: <el-button 72: type="success" 73: plain 74: icon="el-icon-edit" 75: size="mini" 76: :disabled="single" 77: @click="handleUpdate" 78: v-hasPermi="['system:dict:edit']" 79: >修改</el-button> 80: </el-col> 81: <el-col :span="1.5"> 82: <el-button 83: type="danger" 84: plain 85: icon="el-icon-delete" 86: size="mini" 87: :disabled="multiple" 88: @click="handleDelete" 89: v-hasPermi="['system:dict:remove']" 90: >删除</el-button> 91: </el-col> 92: <el-col :span="1.5"> 93: <el-button 94: type="warning" 95: plain 96: icon="el-icon-download" 97: size="mini" 98: @click="handleExport" 99: v-hasPermi="['system:dict:export']" 100: >导出</el-button> 101: </el-col> 102:  112: <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> 113: </el-row>帮我解析权限在这段代码的功能概括和是属于哪个模块哪个功能下的

03-27

看起来这是Vue.js的模板部分，特别是使用了Element UI的组件，比如el-button和el-col。代码中有多个按钮，每个按钮都有v-hasPermi指令，这应该是权限控制的指令。首先，我需要逐个分析每个按钮的v-hasPermi属性。...

elementUI禁用按钮时给出弹框提示

hello world

12-15

4206

需求描述比如项目中有这样的一个需求，就是在某个页面上有一些按钮，这些按钮的状态不固定。可能有时候按钮会禁用不让点击。有时候按钮是正常的状态，允许点击。所以总结下来就是：如果是禁用状态，当鼠标悬浮的时候，出现文字提示；如果是正常状态，当鼠标悬浮的时候就不出现任何变化。好像挺简单的，不过里面有一个细节，需要注意下。我们先看一下最终的效果图遇到问题饿了么ui中的el-tooltip组件具有开启和关闭的功能，但是如果我们直接把组件套在el-button外面，我们会发现，el-tooltip无法开启了，好像也

vue3+elementUI实现列表内没有选中项，按钮禁止点击，存在选中项，按钮可点击

weixin_68557949的博客

03-23

1002

vue3+elementUI实现列表内没有选中项，按钮禁止点击，存在选中项，按钮可点击

elementUI中，table表格，点击行内的按钮，触发了行点击事件，防止冒泡的解决方案

c_qianxia5040的博客

02-15

3548

添加了点击表格中的行事件，但当我点击行内的按钮执行其他操作时，也会触发点击行事件解决方案，只需在结构中点击时加.stop阻止冒泡即可

elementUI表格el-table中处理@row-click和按钮的关系

Charonmomo的博客

10-28

2784

背景有一个使用elementUI制作的表格, 点击每行可以查看其他信息 (@row-click), 每行末尾有编辑和删除两个按钮, 可以对这一行进行操作. 问题添加 @row-click 事件后, 编辑和删除无法点击, 点击这两个按钮也会查看详细信息. 解决方法在编辑和删除这两个按钮的点击事件上加上.stop, 阻止向上冒泡. @click.stop=" " 例如: <el-button type="button"

vue 实现简单跳转

qq_42243957的博客

12-17

1052

vue 跳转页面并且传值以及在新窗口打开页面的方法 1、建一个跳转页面demo.vue <template> <el-row> <p>跳转界面1</p> <el-button style="float: left" type="primary" @click="show3">跳转回主页</el-button> </el-row> </template> <script>

elementui的表格单选选中之后可以取消的方法

weixin_51338875的博客

01-31

4500

解决elementui的表格单选选中之后可以取消的方法

el-table 不触发指定列点击事件

zhao949895887的专栏

11-18

1914

避免el-table cell-click事件触发指定列 ``` <el-table :data="tableData" stripe @cell-click="godetail" class="table"> <el-table-column prop="id" width="100" :column-key="0" label="编号"> &lt...

elementPlus中table的某一行点击会触发一个事件row-click，如何在某一个单元格点击的时候阻止该事件触发

daodaoaixuexi的博客

07-20

3357

elementPlus的@row-click="handleRowClick"事件，点击某个单元格，不触发该事件

Vue中实现ElementUI的Table点击某一行事件：

SunPeng的博客

07-15

8737

Vue中实现ElementUI的Table点击某一行事件：