表格單元格點選操作（彈窗）

表格點選單元格出現彈窗

        <el-table
          ref="table"
          :data="tableList"
          row-key="tableId"
          @row-click="handleRowClick"
        >
          <el-table-column label="列1" prop="column1" align="center">
            <template slot-scope="{ row }">
              <div @click="openDlg('入徑率')">{{ row.column1 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="列2" prop="column2" align="center">
            <template slot-scope="{ row }">
              <div @click="openDlg('執行中')">{{ row.column2 }}</div>
            </template>
          </el-table-column>
          <el-table-column label="列3" prop="column3" align="center"></el-table-column>
        </el-table>

    // 主介面表格點選
    handleRowClick(row, column, event) {
      this.$refs.table.toggleRowExpansion(row);
    },
    // 表格點選開啟彈窗
    openDlg(value) {
      this.dialog = {
        visible: true,
        title: value
      }
    },

彈窗內可以用 v-if =“ dialog.title === '彈窗標題1' ” 來寫不同單元格的彈窗（同一層）