場景

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

效果如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

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

??????? <el-tablev-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中

????????? <el-table-columnlabel="班次"align="center"prop="bc":formatter="bcFormatter"width="400"/>

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

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

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

var bc = row.bc;

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

??? <el-dialog :title="班次詳細信息" :visible.sync="bcxxopen" width="400px" append-to-body><h1>公眾號:霸道的程序猿</h1></el-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中進行指定布局的顯示數據

??? <el-dialog :title="班次詳細信息" :visible.sync="bcxxopen" width="400px" append-to-body><div v-for="(item,index) in this.bcxingxidata" :key="index"><div v-if="item.bclx=='0'"><h1 style="color:red">班次名稱：{{item.bcmc}}</h1><ul v-for="(data,k) in item.bcglXiangXiList" :key="k"><li>打卡時間段{{k+1}}:{{data.dkkssj}}--{{data.dkjssj}}</li></ul></div></el-dialog>

?

總結

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

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