表格单元格点击操作(弹窗)

表格点击单元格出现弹窗

        <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' ” 来写不同单元格的弹窗(同一层)

posted @ 2024-08-21 15:47  .Tik  阅读(198)  评论(0)    收藏  举报