element-ui 的表格里面使用 el-popover 实现编辑弹层功能

<template>
<el-table ref="multipleTable" >
<el-table-column label="操作" width="90">
  <template slot-scope="scope">
    <el-button type="text" @click="handleClickEdit(scope.row, $event)">编辑</el-button>
  </template>
</el-table-column>
</el-table>
<!-- 编辑模板 -->
<el-popover ref="editPopover" placement="bottom-end" width="370"
    v-model="visibleEdit"  :reference="prevTarget" :key="popperFlag"
></el-popover>
</template>
<script>
// 节流-防抖
import { throttle } from 'throttle-debounce';
export default {
  data() {
    return {
      visibleEdit: false,
      prevTarget: null, // 编辑 Popover 的 Reference （参照），用于 popover.js 对齐两个元素
      popperFlag: false, // 用于编辑 Popover 的刷新
    };
  },
  watch: {
    value(n) {
      if(n) {
        this.$nextTick(() => {
          // 添加这个用于处理fixed定位导致的列表行错位
          console.log('this.$refs.multipleTable--->', this.$refs.multipleTable);
          this.$refs.multipleTable.doLayout();
        });
        // 监听滚动，用于编辑框的滚动移除
        this.removeEditPopoverListener(n);
      }
    }
  },
  methods: {
    // 监听滚动，用于编辑框的滚动移除
    removeEditPopoverListener(flag) {
      let timer = setTimeout(() => {
        let scrollElement = this.$refs.multipleTable.$el.querySelector('.el-table__body-wrapper');
        console.log('监听滚动，用于编辑框的滚动移除', flag, scrollElement);
        // 
        let scrollHandle = () => {
          console.log('执行--->', this.visibleEditOpinions);
          if (this.visibleEditOpinions) {
            this.clearEditPopperComponent();
          }
        }
        if (flag) {
          // 滚动节流
          scrollElement.addEventListener('scroll', throttle(500, scrollHandle));
        } else {
          scrollElement.removeEventListener('scroll', scrollHandle);
        }
        clearTimeout(timer);
      }, 0);
    },
    // 复选框选中的数据
    changeSelection(row) {
      this.selectData = row;
      console.log('复选框选中的数据', this.selectData);
      this.seqs = this.selectData.map((el) => { return el.seq; }).toString();
      console.log('seqs---->', this.seqs);
    },
    // 清空编辑组件
    clearEditPopperComponent() {
      this.prevTarget = null;
      this.popperFlag = !this.popperFlag;
      this.visibleEdit = false;
    },
    // 点击编辑
    handleClickEdit(row, e) {
      //阻止事件冒泡，兼容ie
      if (event.stopPropagation) {
        event.stopPropagation();
      } else if (window.event) {
        window.event.cancelBubble = true;
      }
      let currentTarget = e.target; // 赋值当前点击的编辑
      this.editData = row; // 设置编辑数据
      // 判断是否需要切换
      if (this.prevTarget === currentTarget) {
        // 同一个元素重复点击
        this.visibleEdit = !this.visibleEdit;
      } else {
        // 切换不同元素, 判断之前是否有点击其他编辑 prevTarget
        if (this.prevTarget) {
          // 先清除之前的编辑框
          this.clearEditPopperComponent();
          // 然后生成新的编辑框
          this.$nextTick(() => {
            this.prevTarget = currentTarget;
            this.visibleEdit = true;
          });
        } else {
          // 首次
          console.log('首次--->this.prevTarget');
          this.prevTarget = currentTarget;
          this.visibleEdit = true;
        }
      }
    }
  }
};
</script>