element-ui中下拉command传递多参数事件封装

简介: element-ui中下拉command传递多参数事件封装

问题产生


command事件中默认传递一个参数,即你每个下拉选项el-dropdown-item中设定的command的值,怎么样传递多个参数呢?


我的项目中el-dropdown在一个遍历循环中,需要将index角标将参数传给@command="handleCommand"事件中。


解决办法:


动态设置每个el-dropdown-item中command的值


效果图:


效果:下拉框选中后,el-dropdown-link显示选中的信息,并且弹一下消息,内容为选中的id。



vue


<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    {{ dropdownName }}
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <div v-for="item in matchList">
      <el-dropdown-item :command="beforeHandleCommand(item.id,item.name)"> {{ item.name }}</el-dropdown-item>
    </div>
  </el-dropdown-menu>
</el-dropdown>


js


<script>
  export default {
    data() {
      return {
        tableData: [{
          pk_id: 1,
          mname: '中国机设',
          mtype: '计算机',
          date: '2016-05-02',
          name: '燕山大学',
        }, {
          pk_id: 2,
          mname: '蓝桥杯',
          mtype: '计算机',
          date: '2016-05-02',
          name: '河北大学',
        }],
        dropdownName: "下拉菜单",
        matchList: [{
          id: 1,
          name: "燕山大学"
        }, {
          id: 2,
          name: "河北大学"
        }, ],
      }
    },
    methods: {
      handleCommand(command) {
        console.log(command);
        this.dropdownName=command.command;
        this.$message("id:"+command.index);
      },
      beforeHandleCommand(index, command) { //index我这里是遍历的角标,即你需要传递的额外参数
        return {
          'index': index,
          'command': command
        }
      },
    }
  }
</script>
相关文章
|
6月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
6月前
使用element clickoutside自定义指令事件,点击元素外部触发(element-ui/src/utils/clickoutside)
使用element clickoutside自定义指令事件,点击元素外部触发(element-ui/src/utils/clickoutside)
|
3月前
|
编解码 前端开发 vr&ar
从零开始的PICO教程(4)--- UI界面绘制与响应事件
这篇文章是PICO开发系列教程的第四部分,主要介绍了如何在PICO 4 VR环境中创建UI界面,包括Canvas和Panel的配置、UI元素的绘制、以及Button和Slider的事件响应绑定,并通过示例展示了数字增减和滑块功能的具体实现。
从零开始的PICO教程(4)--- UI界面绘制与响应事件
|
4月前
element UI 组件封装--搜索表单(含插槽和内嵌组件)
element UI 组件封装--搜索表单(含插槽和内嵌组件)
132 5
|
4月前
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
Element UI【实战范例】下拉选择 el-select 的 change 事件传入选中值+自定义参数
731 1
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
48 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件1
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件1
57 0
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
47 0
|
6月前
|
C++
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目(二)
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目
105 0
|
6月前
|
算法 关系型数据库 编译器
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目(一)
[项目配置] 配置Qt函数库和ui界面库的封装并调用的项目
193 0