場景

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

效果如下

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

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

        <el-table
          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中

          <el-table-column
            label="班次"
            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>