(vue)Dropdown的使用：操作按钮汇总

nyf_unknown

已于 2022-08-17 18:02:24 修改

阅读量1.2k

点赞数

分类专栏： VUE 文章标签： vue.js 前端 javascript

于 2022-06-06 09:31:39 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/125103522

版权

VUE 专栏收录该内容

189 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在 Vue.js 中使用 Dropdown 组件来创建操作按钮，包括点击事件处理、修改和删除功能的实现。示例代码展示了在表格中添加操作列，通过 Dropdown 显示修改和删除选项，点击触发相应的 editSimilar 和 delSimilar 方法。

摘要由CSDN通过智能技术生成

(vue)Dropdown的使用：操作按钮汇总

// 1.html
<template slot-scope="{ row }" slot="operation">
   <Dropdown @on-click="dropdownClick($event, row)" trigger="click">
     <div class="dropdown-button">
       <span>选择</span>
       <Icon type="ios-arrow-down"></Icon>
     </div>
     <DropdownMenu slot="list">
       <DropdownItem name="修改">修改</DropdownItem>
       <DropdownItem name="删除">删除</DropdownItem>
     </DropdownMenu>
   </Dropdown>
 </template>

data(){
	return {
	  //表格
      columns: [
        {
          title: "操作",
          slot: "operation",
          align: "center",
          width: 150,
        },
      ]
	}
}

// 2.方法
dropdownClick(val, row) {
  if (val == "修改") {
    this.editSimilarrow(row);  // 修改方法
  } else {
    this.delSimilarrow(row);  // 删除方法
  }
},