Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法(基于 vue + AntDesign)

第Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法(基于vue+AntDesign)

最近做的一個(gè)項(xiàng)目是基于vue+AntDesign的。由于項(xiàng)目要求，需要在Table組件的行內(nèi)點(diǎn)右鍵的時(shí)候彈出菜單。在線(xiàn)演示地址及最終效果圖如下：

在線(xiàn)演示地址

首先新建一個(gè)Table組件的實(shí)例：

a-table

:columns=columns

:rowKey=record={returnrecord.INDEX;}

:dataSource=tableData

constcolumns=[

title:序號(hào),

dataIndex:INDEX

title:主題大類(lèi),

dataIndex:THEME

title:中文名稱(chēng),

dataIndex:CN_NAME

title:英文名稱(chēng),

dataIndex:EN_NAME

data(){

return{

columns,

tableData:[

{INDEX:0,THEME:基礎(chǔ)數(shù)據(jù),CN_NAME:地區(qū),EN_NAME:Area},

{INDEX:1,THEME:個(gè)人信息,CN_NAME:姓名,EN_NAME:Name}

}

新建一個(gè)Menu菜單組件的實(shí)例及其樣式：

a-menu:>

注意這里給Menu加樣式主要是為了實(shí)現(xiàn)點(diǎn)右鍵時(shí)Menu菜單出現(xiàn)在鼠標(biāo)位置，所以我用了position:absolute來(lái)定義。

下面就是最重要的，通過(guò)Table組件的customRow參數(shù)來(lái)設(shè)置鼠標(biāo)右鍵事件。首先添加Table組件的customRow參數(shù)：

a-table

:customRow=customClick

/

然后在data里添加customClick的右鍵方法，以及在methods里添加body的click方法。添加body的click方法是為了在出現(xiàn)右鍵菜單后，點(diǎn)擊左鍵時(shí)關(guān)閉菜單。

data(){

return{

customClick:record=({

on:{

contextmenu:e={

e.preventDefault();

this.menuData=record;

this.menuVisible=true;

this.menuStyle.top=e.clientY+px

this.menuStyle.left=e.clientX+px

document.body.addEventListener(click,this.bodyClick);

methods:{

bodyClick(){

this.menuVisible=false;

document.body.removeEventListener(click,this.bodyClick);

至此，AntDesignVue中Table組件行內(nèi)右鍵菜單就實(shí)現(xiàn)了。完整代碼如下：

template

div

a-table

:columns=columns

:rowKey=record={returnrecord.INDEX;}

:dataSource=tableData

:customRow=customClick

a-menu:>

以上所述是小編給大家介紹的Vue中Table組件行內(nèi)右鍵菜單實(shí)現(xiàn)方法，希