vue ElementUI select组件传递多个参数

vue elementUI select组件向后端传两个参数( userId和userName)

<el-form-item label="用户姓名" prop="userName">
  <el-select v-model='form.userName' style="" class="selectClass" @change="userChange($event)">
    <el-option v-for='item in userList' :key='item.userId'
       :label="item.nickName" :value="{userId: item.userId, userName: item.nickName}">
      {{ item.nickName }}
    </el-option>
  </el-select>
</el-form-item>
userChange(event) {
   this.form.userId = event.userId;
   this.form.userName = event.userName;
 },

截图说明

在这里插入图片描述

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: Vue ElementUI 拖拽组件是一种基于 Vue.js 和 ElementUI 的可拖拽组件,可以让用户通过鼠标拖拽的方式来移动组件位置,从而实现页面布局的自由调整。该组件可以轻松地集成到 Vue.js 项目中,并且具有丰富的配置选项,可以满足不同的需求。同时,ElementUI 拖拽组件还支持多种事件回调和自定义样式,可以让开发者更加灵活地控制组件的行为和外观。 ### 回答2: Vue和Element UI是目前非常流行的前端开发框架,借助它们可以快速构建出现代化、响应式的Web应用程序。其中,Element UI提供了丰富的组件,包括拖拽组件。 在Vue中使用Element UI的拖拽组件,首先需要引入Element UI库,并在项目中注册拖拽组件。然后,在需要使用拖拽功能的页面中,通过使用`el-draggable`指令来实现拖拽效果。例如,可以将要拖拽的元素包裹在一个`el-draggable`元素中,并设置`v-model`指令来绑定拖拽时元素的位置信息。 基本的拖拽功能只需要在元素上添加`v-draggable`指令即可。拖拽时,元素会根据鼠标的移动而改变位置,同时会触发相应的事件,比如`drag-start`、`drag`和`drag-end`等事件,可以在这些事件中自定义拖拽过程中的操作。 除了基本的拖拽功能,Element UI的拖拽组件还提供了一些其他的功能选项,比如拖拽的方向限制、边界限制、拖拽时的阴影效果等等。通过在`el-draggable`元素上添加适当的属性配置,可以实现这些扩展功能。 总之,使用Vue和Element UI的拖拽组件可以大大简化前端开发过程中的拖拽功能实现。只需要简单的配置和使用相关指令,就可以实现各种拖拽需求,提升用户体验。 ### 回答3: Vue ElementUI是基于Vue.js的组件库,其中包含了一些常用的UI组件,如表格、按钮、输入框等。其中也包含了一个拖拽组件,可用于实现在网页中拖拽元素的功能。 使用Vue ElementUI的拖拽组件有以下几个步骤: 1. 安装Vue ElementUI:可以使用npm或yarn命令行工具,在项目目录下执行命令`npm install element-ui`或`yarn add element-ui`进行安装。 2. 引入需要使用的组件:在需要使用拖拽功能的组件中,使用import语句引入`el-draggable`组件,并在`components`中注册。 3. 在模板中使用拖拽组件:在模板中使用`el-draggable`标签,并为其绑定相应的属性和事件。通常,需要设置`v-model`来绑定要拖拽的元素,还可以设置`group`属性来指定拖拽的组别。 4. 处理拖拽事件:在Vue组件的方法中,定义拖拽相关的事件处理函数。例如,可以使用`@start`、`@drag`和`@end`等事件来处理拖拽开始、拖拽进行中以及拖拽结束的逻辑。 5. 样式定义:根据需要,可以自定义拖拽元素的样式。可以使用`transition`属性来定义拖拽时的过渡效果,也可以使用`handler`属性来指定只能通过某个元素进行拖拽。 通过以上步骤,就可以在Vue项目中使用Vue ElementUI的拖拽组件来实现元素的拖拽功能了。这个组件提供了简洁易用的api,可以帮助开发者快速实现拖拽的效果,提高开发效率。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

victor-维克特

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值