在Element-plus的el-table-column内使用el-switch :before-change 属性传递行数据实现

已于 2024-08-23 12:57:35 修改
阅读量209 收藏
点赞数 1
文章标签： vue.js javascript elementui
于 2024-08-23 12:55:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35359521/article/details/141463011
版权

Element-plus 组件 el-switch 在el-table-column的插槽中，如何使用 before-change 时传递行数据[row]？

简单搜了一下，大多数都是非表格中的使用bind方法绑定参数的。自己简单如下尝试了一下，发现是可行的。
如果直接使用 :before-change=“yourProcessFun(row)”，会在表格数据初始化时，先行触发了方法。
目前按照如下写法暂未发现异常。
插槽内写法
调用方法处的写法

vacalei
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何基于elementui table实现自己的表格组件
万万没想到的博客
10-29 1107
前两篇博客已经讲过如何实现，这里我把功能抽成了一个组件，这样如果有多个需要该功能的表格就可以复用了： 首先先是组件的代码： <template> <el-table v-loading="listLoading" :data="tableData" border fit ...
elementui table实现动态将列固定到左侧(fixed)
热门推荐
万万没想到的博客
10-28 1万+
前言 这个功能是是在elementui表格的列拖拽及动态显示列实现基础上进行的功能增强 在开始之前请自行查询v-contextmenu 组件的安装以及全局引用 注：后端开发前端实现并不规范，主要讲个思路，代码优化看你了（如果有可以私信或者评论告诉我，跪谢） ...
vue3+elementPlus：el-table表格里设置switch开关
意初的博客
09-30 9602
vue3+elementPlus：el-table表格里设置switch开关。里面写v-model用来绑定字段。在开关外层用插槽包裹。用插槽包裹el-switch开关，v-model双向响应,js层，实战版本,请求后台接口版,与后台接口交互将数据传给el-table绑定的:data=>data.tableList，，注意：要数据里有changer这个字段。最后将请求函数挂载到vue视图上
element plus el-switch 的before-change 如何带参数
sdaulee的博客
05-17 6874
看文档Switch 开关 | Element Plus 设置beforeChange属性，若返回 false 或者返回 Promise 且被 reject，则停止切换。 const beforeChange2 = () => { loading2.value = true return new Promise((_, reject) => { setTimeout(() => { loading2.value = false ElMessag
elementUI中 el-Switch 在 el-table-column 中点击无效的问题
最爱喝怡宝的博客
03-24 4263
在写项目时发现，就算绑定了 v-model ，switch开关也是不会生效，下面这个方法可以解决 <el-table-column> <!-- slot-scope="scope" 用来解决不生效的问题 --> <!-- scope.row.show 这里的 row 指的是 table绑定的data的数据 --> <template slot-scope="scope"> <el-swit
在el-table的表格中嵌入el-switch
weixin_45454859的博客
04-22 1613
在el-table的表格中嵌入el-switch
ElementPlus switch组件初始化触发change事件处理
weixin_42630688的博客
03-11 954
今天在写一个表格时候，表格中有个switch组件，change事件的时候需要调用接口改下状态。然后就出现页面刚进来的时候触发了一次change事件，调了一次接口。加上这个也没有什么用，刷新页面的时候还是会触发一次change事件。这里初始化的时候就会触发change，数据转成布尔值就不会触发。后端返回的字段是字符串1和0，不是true,false。看了下api有个before-change属性，
vue-商城用户管理系统项目
tian_98的博客
12-14 606
项目前期准备 创建项目： cmd命令行：vue init webpack 项目名 --> vue init webpack shop-admin（yyyyynnny） cd shop-admin进入项目 安装vuex：npm i vuex（状态管理模式） 官方文档 *创建src/store/index.js文件 import Vue from "vue" import Vuex from "vuex" // 安装插件 Vue.use(Vuex); // store-> vu
vue:使用技巧汇总篇
webfullstack的博客
07-11 773
初级级提升篇 v-bind:class=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;{xx:shopType.selected,dashed:!shopType.selected}&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; &amp;
OSCP Learning Notes - Privilege Escalation
weixin_30642561的博客
07-29 4063
Privilege Escalation Download the Basic-pentesting vitualmation from the following website: https://www.vulnhub.com/entry/basic-pentesting-1,216/ 1.Scan the target server using nmap. nmap...
element---在el-table中el-switch用法
weixin_45102212的博客
02-15 5692
项目中操作此数据： <el-table-column prop="custom" label="是否展示" align="center"> <template slot-scope="scope"> <el-switch v-model="scope.row.custom" active-value="1" inactive-value=
vue3 ElementUI Switch before-change自动调用问题
天高任鸟飞
09-14 1636
使用 :beforeChange 这个属性 但是这个属性。传值 如果直接传值依然会自动调用,
解决Element-Plus中el-switch的change方法自动触发问题
qq_41623635的博客
01-05 3898
getCurrentInstance()方法是Vue3 Composition API中的一个API函数。它的作用是返回一个组件实例对象，可以用来操作当前组件的各种属性和方法。这个方法是一个全局API，可以在任何地方使用。
element-plus中 el-switch组件初始化执行change方法（已解决！）
qq_42957741的博客
12-09 7408
element-plus第一次会加载或刷新会触发change的解决办法
el-table中添加switch 且绑定值为0和1
qq_57305148的博客
11-17 1349
switch开关经常用在是否启用的场合，但是switch默认绑定值的类型是布尔类型，即true和false，在实际的项目中，后端的接口都会用0和1来代替，如何将数值与状态进行关联呢？
[Vue]el-table-column通过prop参数传递数据
m0_61530270的博客
06-20 2235
【代码】[Vue]el-table-column通过prop参数传递数据。
elementplus初始化页面的时候el-switch自动触发的问题解决方案
sdad2154的博客
09-19 1122
使用 :beforeChange 这个属性 但是这个属性。传值 如果直接传值依然会自动调用,
Element UI中table表格中使用Switch 开关及调接口
Jadon_z的个人博客
08-29 3738
Element UI中table表格中使用Switch 开关及调接口
elementUI el-table中多列使用el-switch切换导致的问题
heirui的专栏
08-26 3316
el-table表格中多列使用el-switch开关时的冲突解决
element-plus el-table el-table-column 根据后端返回数据动态生成
最新发布
03-23
element-plus是一套基于Vue.js的UI组件库，提供了丰富的组件和功能，其中包括了el-table和el-table-column组件。 el-table是element-plus中的表格组件，用于展示数据。它可以根据后端返回的数据动态生成表格内容。你可以通过设置el-table的data属性来绑定后端返回的数据，然后el-table会根据数据自动生成表格的行和列。 el-table-column是el-table中的列组件，用于定义表格的列。你可以通过设置el-table的columns属性来配置表格的列，每个el-table-column代表一列。在el-table-column中，你可以设置prop属性来指定该列对应后端数据的字段名，label属性来设置列的标题，以及其他属性来定义列的样式和行为。 通过使用el-table和el-table-column组件，你可以方便地根据后端返回的数据动态生成表格，并且可以灵活地配置表格的列和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值