vue应用：如何使用下拉插件el-dropdown

vue应用：如何使用下拉插件el-dropdown。我们用一个实例说明下。

使用el-dropdown

<el-dropdown
@command="
    (command) => {
    handleCommand(command, scope.$index, scope.row);
    }
"
>
<el-link type="primary" :underline="false" style="margin-left: 10px"
    >更多</el-link
>
<el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="f" v-if="scope.row.active_type == 1"
    ><i class="el-icon-download"></i>资料下载</el-dropdown-item
    >
    <el-dropdown-item command="a"
    ><i class="el-icon-document-copy"></i>复制</el-dropdown-item
    >
    <el-dropdown-item command="b" v-if="scope.row.is_top == 0"
    ><i class="el-icon-top"></i>置顶</el-dropdown-item
    >
    <el-dropdown-item command="c" v-if="scope.row.is_top >= 1"
    ><i class="el-icon-top"></i>取消置顶</el-dropdown-item
    >
    <el-dropdown-item command="d"
    ><i class="el-icon-edit"></i>重命名</el-dropdown-item
    >
    <el-dropdown-item
    command="e"
    v-if="scope.row.active_join_num == 0"
    ><i class="el-icon-delete"></i>删除</el-dropdown-item
    >
</el-dropdown-menu>
</el-dropdown>

<!-- 弹出的重命名-->
<el-dialog title="重命名" :visible.sync="renamePopUp" width="500px">
    <el-form :model="form" label-width="70px">
      <el-form-item label="新名称:">
        <el-input
          placeholder="请输入"
          v-model="form.active_name"
          class="d2-mr-15"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 编辑框中的确认取消按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="checkClose" size="medium">取消</el-button>
      <el-button
        type="primary"
        @click="changeData"
        :loading="saveLoading"
        size="medium"
        >确定</el-button
      >
    </div>
</el-dialog>

/**
* 更多
*/
handleCommand(command, index, row) {
 console.log("command", command, row);
 //复制
 if (command == "a") {
   Ajax(
     {
       method: "put",
       url: "/active/copy",
       params: { active_id: row.active_id },
     },
     (res) => {
       this.saveLoading = false;
       if (res.status_code === 200) {
         this.$message({ message: "复制成功", type: "success" });
         // 复制成功回到第一页
         this.pageInfo.currentPage = 1;
         this.getData();
       }
     },
     (err) => {
       this.saveLoading = false;
     }
   );
 }
 //置顶
 if (command == "b") {
   this.handleTop(row, 1);
 }
 //取消置顶
 if (command == "c") {
   this.handleTop(row, 0);
 }
 // 重命名
 if (command == "d") {
   this.renamePopUp = true;
   this.form = row;
   this.editPostUrl = 3;
 }
 //删除
 if (command == "e") {
   this.handleDelete(index, row);
 }
 //资料下载
 if (command == "f") {
   window.open(row.url_arr[0]);
 }
},

/**
 * 置顶
 */
    handleTop(row, is_top) {
    this.loading = true;
    console.log(row.is_top);
    Ajax(
        {
        url: "/active/top", // 路径
        method: "put",
        params: { active_id: row.active_id, is_top: is_top },
        },
        (res) => {
        this.loading = false;
        if (res.status_code === 200) {
            this.$message({ message: "操作成功", type: "success" });
            this.getData();
        }
        },
        (err) => {
        this.loading = false;
        }
    );
    },

/**
 * 删除
 */
handleDelete(index, row) {
  this.$confirm("你是否确认删除这个活动?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      this.loading = true;
      //删除
      Ajax(
        {
          method: "delete",
          url: "/active",
          params: { active_id: row.active_id },
        },
        (res) => {
          this.loading = false;
          if (res.status_code === 200) {
            this.$message({ message: "删除活动成功", type: "success" });
            this.getData();
          }
        },
        (err) => {
          this.loading = false;
        }
      );
    })
    .catch(() => {
      this.$message({ type: "info", message: "已取消删除" });
    });
},

vue el-dropdown点击事件

vue el-dropdown点击事件有个神坑，@click不起效，要在后面加 @click.native才能生效

如下

<el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-print="'#printTest'">打印</el-dropdown-item>
                  <el-dropdown-item @click.native="clickGeneratePicture">图片另存为</el-dropdown-item>
                  <el-dropdown-item @click.native="lookFrish">刷新</el-dropdown-item>
                </el-dropdown-menu>
</el-dropdown>

试试吧。