ElementUI中el-table雙擊單元格事件並獲取指定列的值和彈窗顯示詳細信息

場景

雙擊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>