switch调函数 vue_浅谈ElementUI中switch回调函数change的参数问题

v-model="value1"

@change='changeStatus($event,1)'>

v-model="value2"

@change='changeStatus($event,2)'>

var vm = new Vue({

el: "#app",

data: {

value1: true,

value2: false

},

methods: {

change: function($event,num){

console.log($event);

console.log(num);

}

}

})

拓展知识:基于element-ui(vue版)使用switch时change回调函数中的形参传值问题

需求说明

有多个switch组件

需要知道switch的状态

表格中当前行(scope.row)的数据

问题描述

官方文档中对switch中change的描述:

目前能得到switch的状态值,但是无法得到change回调中第二个形参的值

解决方法:

change回调函数默认形参的实参是$event,其它的实参传自己需要的数据就ok

以上这篇浅谈ElementUI中switch回调函数change的参数问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3和Element Plus封装表格组件,可以使用以下方法: 1. 首先,在Vue3创建一个新的组件,可以命名为TableWrapper或者其他你喜欢的名称。 2. 在组件引入Element Plus的Table组件,并在data定义需要用到的数据,例如tableData和tableHeader。 3. 在template使用Table组件,并通过props传递数据。使用v-for循环遍历tableHeader来动态生成表头信息。 4. 在Table组件,可以通过slot插槽自定义表格的内容,例如添加操作按钮或其他自定义内容。 5. 可以在Table组件定义一些方法,例如handleEdit和handleDelete,用于处理编辑和删除操作。 6. 最后,在父组件使用TableWrapper组件,并传递需要显示的数据和其他配置项。 以下是一个示例代码,供参考: ```vue <template> <Table :data="tableData" :columns="tableHeader" border > <template #ksType="{ row }"> <span>{{ row.type }}</span> </template> <template #isDisabled="{ row }"> <el-switch v-model="row.isDisabled" active-text="是" inactive-text="否" :active-value="0" :inactive-value="1" @change="switchChange(row)" ></el-switch> </template> <template #btn="{ row }"> <el-button v-for="(btn, index) in row.btn" :key="index" :type="btn.btnStyle || 'default'" @click="btn.func(row)" > {{ btn.name }} </el-button> </template> </Table> </template> <script> import { Table } from 'element-plus'; export default { components: { Table, }, data() { return { tableData: [], tableHeader: [ { prop: "name", label: "名称" }, { prop: "type", label: "科室类型", slot: "ksType" }, { prop: "isDisabled", label: "是否禁用", slot: "isDisabled" }, { prop: "btn", label: "操作", slot: "btn" }, ], }; }, methods: { switchChange(row) { // 处理开关切换操作 }, handleEdit(row) { // 处理编辑操作 }, handleDelete(row) { // 处理删除操作 }, }, }; </script> ``` 在这个示例,我们使用了Element Plus的Table组件,并通过slot插槽自定义了表格的内容。同时,我们在组件定义了一些方法来处理具体的操作。你可以根据自己的需求进行修改和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue3+element-plus封装表格](https://blog.csdn.net/weixin_50041614/article/details/126702116)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [go语言恶意代码检测系统-对接前端可视化与算法检测部分](https://download.csdn.net/download/liufang_imei/88222624)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值