場景

雙擊el-table的某個單元格時獲取此單元格的信息并彈窗顯示其他關聯的信息。

效果如下

注：

實現

首先給el-table設置cell-dblclick事件

v-loading="loading":data="kqryszList"@selection-change="handleSelectionChange"@cell-dblclick="bccelldblclick"

ref="tb"

>

在事件對應的方法中接收四個參數

//班次單元格雙擊

bccelldblclick(row, column, cell, event) {//雙擊的是班次單元格

if (column.property == "bc") {this.bcxxopen = true;

}

}//雙擊的是班次組單元格

if (column.property == "bcz") {this.bczxxopen = true;

}

}

},

這里用到了行對象和列對象以及單元格對應。

上面設置的單元格雙擊事件是對所有的單元格雙擊都生效。

如果只是想對某一列的單元格雙擊進行生效的話，可以通過

if (column.property == "bc")

來進行判斷，其中bc是在el-table中

label="班次"align="center"prop="bc":formatter="bcFormatter"width="400"

/>

來設置的，這樣就能限制只有在當前列是對應的bc屬性的列時才執行下面的操作。

那么怎樣獲取當前雙擊的單元格的值。

通過傳遞的參數的row行對應對應的屬性bc就可以定位到當前雙擊的單元格的值。

var bc = row.bc;

然后上面是進行的彈窗顯示，首先在頁面中定義一個dialog

公眾號:霸道的程序猿

設置它是否隱藏是通過

:visible.sync="bcxxopen"

來實現，其中bcxxopen是一個boolean變量。

需要聲明這個變量

data() {return{

bcxxopen:false,

默認是false即隱藏，那么在上面雙擊單元格時將此變量設置為true就能顯示出來了。

如果是需要根據拿到的當前單元格的值來進行關聯查詢相關信息。

bccelldblclick(row, column, cell, event) {

console.log(column);//雙擊的是班次單元格

if (column.property == "bc") {//根據班次編號循環獲取班次詳細信息

var bc =row.bc;if (bc != null) {var bcarray = bc.split(",");

getBcInfoByBhs(bcarray).then((response)=>{this.bcxingxidata =response.data;

});this.bcxxopen = true;

}

}

},

首先獲取到當前單元格的值，然后調用請求后臺數據的方法，將請求的數據賦值給

this.bcxingxidata

首先需要提前聲明這個數組

data() {return{

bcxingxidata: [],

然后在打開的彈窗的dialog中進行指定布局的顯示數據

班次名稱：{{item.bcmc}}

• 打卡時間段{{k+1}}:{{data.dkkssj}}--{{data.dkjssj}}

總結

以上是生活随笔為你收集整理的elementui 弹窗 显示详细信息_ElementUI中el-table双击单元格事件并获取指定列的值和弹窗显示详细信息...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。