Vue?el-table實(shí)現(xiàn)右鍵菜單功能
更新時(shí)間：2022年04月10日 10:03:19 作者：Song_Estelle
這篇文章主要為大家詳細(xì)介紹了Vue?el-table實(shí)現(xiàn)右鍵菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue el-table實(shí)現(xiàn)右鍵菜單功能的具體代碼，供大家參考，具體內(nèi)容如下
實(shí)現(xiàn)的效果如下：
1.el-table和右鍵菜單視圖代碼
@row-contextmenu="rightClick"是右鍵點(diǎn)擊事件
@row-click="clickTableRow"是每行單擊事件
<el-table
? ? border
? ? :data="connectList"
? ? @row-contextmenu="rightClick"
? ? @row-click="clickTableRow"
>
? <el-table-column label="ID" align="center" width="180" prop="id"/>
? <el-table-column label="目標(biāo)" align="center" prop="url" :show-overflow-tooltip="true"/>
? <el-table-column label="修改時(shí)間" align="center" width="180" sortable prop="updatatime"/>
? <el-table-column label="盤符" align="center" width="60" prop="drive"/>
</el-table>
<!-- 右鍵菜單 -->
<div id="menu" class="menuDiv">
? <ul class="menuUl">
? ? <li
? ? ? ? v-for="(item, index) in menus"
? ? ? ? :key="index"
? ? ? ? @click.stop="infoClick(index)"
? ? >
? ? ? {{ item.name }}
? ? </li>
? </ul>
</div>2.js方法代碼
data() {
?return {
?? ?//右鍵菜單
? ?menus: [
? ? ?{ name: '編輯webshell', operType: 1 },
? ? ?{ name: '刪除webshell', operType: 2 },
? ? ?{ name: '虛擬終端', operType: 3 },
? ? ?{ name: '文件管理', operType: 4 }
? ?]
?}
// methods 部分：
// table的右鍵點(diǎn)擊當(dāng)前行事件
rightClick(row, column, event) {
? let menu = document.querySelector("#menu");
? //阻止元素發(fā)生默認(rèn)的行為
? event.preventDefault();
? // 根據(jù)事件對(duì)象中鼠標(biāo)點(diǎn)擊的位置，進(jìn)行定位
? menu.style.left = event.clientX + 10 + "px";
? menu.style.top = event.clientY - 30 + "px";
? // 改變自定義菜單的隱藏與顯示
? menu.style.display = "block";
? menu.style.zIndex = 1000;
},
?// table的左鍵點(diǎn)擊當(dāng)前行事件
clickTableRow(row, column, event) {
? let menu = document.querySelector("#menu");
? menu.style.display = "none";
},
// 自定義菜單的點(diǎn)擊事件
infoClick(index) {
? if (index === 0) {
? // do something
? }
? let menu = document.querySelector("#menu");
? menu.style.display = "none";
},3.css樣式代碼
.menuDiv {
? display: none;
? position: absolute;
? .menuUl {
? ? height: auto;
? ? width: auto;
? ? font-size: 14px;
? ? text-align: left;
? ? border-radius: 3px;
? ? border: none;
? ? background-color: #c4c4c4;
? ? color: #fff;
? ? list-style: none;
? ? padding: 0 10px;
? ? li {
? ? ? width: 140px;
? ? ? height: 35px;
? ? ? line-height: 35px;
? ? ? cursor: pointer;
? ? ? border-bottom: 1px solid rgba(255, 255, 255, 0.47);
? ? ? &:hover {
? ? ? ? // background-color: rgb(26, 117, 158);
? ? ? ? color: rgb(54, 138, 175);
? ? ? }
? ? }
? }
}以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于vue-property-decorator的基礎(chǔ)使用實(shí)踐
這篇文章主要介紹了關(guān)于vue-property-decorator的基礎(chǔ)使用實(shí)踐，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了vue中對(duì)token有效期的深入理解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了Vue CL3 配置路徑別名詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中使用openlayers創(chuàng)建地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue使用recorder-core.js實(shí)現(xiàn)錄音功能
這篇文章主要介紹了vue如何使用recorder-core.js實(shí)現(xiàn)錄音功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue使用Proxy代理后仍無法生效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue.js使用watch監(jiān)聽路由變化的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vuejs第十篇之vuejs父子組件通信的相關(guān)資料,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
Vue實(shí)現(xiàn)開始時(shí)間和結(jié)束時(shí)間范圍查詢
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)開始時(shí)間和結(jié)束時(shí)間的范圍查詢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
利用SpringMVC過濾器解決vue跨域請(qǐng)求的問題
下面小編就為大家分享一篇利用SpringMVC過濾器解決vue跨域請(qǐng)求的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02