Element el-dropdown 事件

原创已于 2023-06-20 14:32:07 修改 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#数学建模

于 2023-06-20 12:30:32 首次发布

文章讲述了如何在Vue.js项目中结合el-table组件，通过设置trigger=click触发点击事件，实现当用户从下拉菜单中选择值后，同时获取到选中行的数据和下拉菜单的值。关键代码包括handleCommand方法处理命令事件，changeDrop方法处理可见性变化，以及data选项中的permissionOptions数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我这里是结合el-table一起使用

设置trigger="click" 就可以加点击事件

这里我需要点击下拉选择值后，既要得到下拉里面的值也要得到这一行数据的值

重要的代码


<el-dropdown
                  trigger="click"
                  @command="handleCommand($event,scope.row,scope.$index)"
                  @visible-change="changeDrop(scope.$index,'其他值')"
>
handleCommand(item,row,index) {
      console.log(item,"item")//下拉菜单里面的值
      console.log(row,"row")//表格里面的数据
      console.log(index,"index")//1 表格列下标
    this.tableData[index].auth = item.value
}

changeDrop(index, item) { //可以得到表格的值
      console.log(item,"cccc")//其他值
      this.tableData[index].auth = "赋值"
},

data(){
    return{
        permissionOptions: [
        { value: '1', label: '仅使用' },
        { value: '2', label: '可复制' },
        { value: '3', label: '可编辑' },
        // { value:"0",label: '移除权限' },
      ],
    }
}


<el-table-column align="center" prop="handle" label="操作">
            <template slot-scope="scope">
              <div style="margin-right:10px">
                <el-dropdown
                  trigger="click"
                  @command="handleCommand($event,scope.row)"
                  @visible-change="changeDrop(scope.$index)"
                >
                  <span class="el-dropdown-link">
                    <el-button type="primary" size="mini"
                      >{{ scope.row.auth == '1' ? '仅使用' : '可复制'
                      }}<i class="el-icon-arrow-down el-icon--right"></i
                    ></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      :command="item"
                      v-for="(item, index) in permissionOptions"
                      :key="index"
                      >{{ item.label }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              
            </template>
          </el-table-column>