服务器之家

服务器之家 > 正文

Vue + Element-ui的下拉框el-select获取额外参数详解

时间:2021-08-23 17:04     来源/作者:myCat、

直接上代码吧~

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<el-table-column
      label="用户类型"
      width="180">
      <template slot-scope="scope">
       <el-select v-model="scope.row.roleID"
             placeholder="请选择" @change="changeRole($event,scope)">
        <el-option
         v-for="item in roles"
         :key="item.value"
         :label="item.label"
         :value="item.value">
        </el-option>
       </el-select>
      </template>
</el-table-column>

我想在触发下拉框change事件时获取到scope里的值,因为el-select的change事件默认有个回调参数,就是选择的value,如果想额外获取其他的值不能直接写@change="changeRole(scope)",这样会覆盖默认的参数,加上$event就可以取到了。

不仅仅是el-select,其余的Element-UI的组件中实现这种不想覆盖默认参数都可以这样使用。

补充知识:element UI中的select选择器的change方法需要传递多个值

如果直接调用change事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参数传递过去)

场景:

你需要将select选择器 ”选中的当前元素“ 和 ”其他你需要的值“ 一起传递过去?

做法:

change ($event,“你要传递的其他值”)

以上这篇Vue + Element-ui的下拉框el-select获取额外参数详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/WYA1993/article/details/84786846

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部