Vue?el-table實現(xiàn)右鍵菜單功能

更新時間：2022年04月10日 10:03:19 作者：Song_Estelle

這篇文章主要為大家詳細介紹了Vue?el-table實現(xiàn)右鍵菜單功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue el-table實現(xiàn)右鍵菜單功能的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)的效果如下：

1.el-table和右鍵菜單視圖代碼

@row-contextmenu="rightClick"是右鍵點擊事件

@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="目標" align="center" prop="url" :show-overflow-tooltip="true"/>
? <el-table-column label="修改時間" 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的右鍵點擊當(dāng)前行事件
rightClick(row, column, event) {
? let menu = document.querySelector("#menu");
? //阻止元素發(fā)生默認的行為
? event.preventDefault();
? // 根據(jù)事件對象中鼠標點擊的位置，進行定位
? menu.style.left = event.clientX + 10 + "px";
? menu.style.top = event.clientY - 30 + "px";
? // 改變自定義菜單的隱藏與顯示
? menu.style.display = "block";
? menu.style.zIndex = 1000;
},
?// table的左鍵點擊當(dāng)前行事件
clickTableRow(row, column, event) {
? let menu = document.querySelector("#menu");
? menu.style.display = "none";
},
// 自定義菜單的點擊事件
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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: