vue中使用el-dropdown方式
vue 使用el-dropdown
點(diǎn)擊【更多】彈出如下選項(xiàng)
使用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>復(fù)制</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="請(qǐng)輸入" v-model="form.active_name" class="d2-mr-15" clearable ></el-input> </el-form-item> </el-form> <!-- 編輯框中的確認(rèn)取消按鈕 --> <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); //復(fù)制 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: "復(fù)制成功", type: "success" }); // 復(fù)制成功回到第一頁(yè) 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("你是否確認(rèn)刪除這個(gè)活動(dòng)?", "提示", { 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: "刪除活動(dòng)成功", type: "success" }); this.getData(); } }, (err) => { this.loading = false; } ); }) .catch(() => { this.$message({ type: "info", message: "已取消刪除" }); }); },
vue el-dropdown點(diǎn)擊事件
vue el-dropdown點(diǎn)擊事件有個(gè)神坑,@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>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vant picker 多級(jí)聯(lián)動(dòng)操作
這篇文章主要介紹了Vant picker 多級(jí)聯(lián)動(dòng)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue 項(xiàng)目中的this.$get,this.$post等$的用法案例詳解
vue.js的插件應(yīng)該暴露一個(gè)install方法。這個(gè)方法的第一個(gè)參數(shù)是vue構(gòu)造器,第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象,首頁(yè)要安裝axios,本文結(jié)合案例代碼給大家詳細(xì)講解vue 中的this.$get,this.$post等$的用法,一起學(xué)習(xí)下吧2022-12-12Vue實(shí)現(xiàn)移動(dòng)端左右滑動(dòng)效果的方法
最近得到一個(gè)新需求,需要在Vue項(xiàng)目的移動(dòng)端頁(yè)面上加上左右滑動(dòng)效果,經(jīng)過(guò)一番折騰,最終決定四月vue-touch。下面小編把實(shí)現(xiàn)代碼分享給大家,感興趣的朋友一起看看吧2018-11-11Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法舉例
我們?cè)陂_發(fā)vue的頁(yè)面的時(shí)候,有時(shí)候會(huì)遇到需要刷新當(dāng)前頁(yè)面功能,但是vue框架自帶的router是不支持刷新當(dāng)前頁(yè)面功能,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法,需要的朋友可以參考下2023-04-04