The el-popover component under vue realizes the roller following function

describe

The use is to click to trigger the pop-up content. The goal is to scroll the mouse up and down when the content is popped up. The pop-up content and the click button are not separated.

The function is realized by monitoring the scrolling of the page. When the scrolling of the page is monitored, the position of the component is updated through the updatePopper() method of the component

the code

<el-popover 
    ref="popover"
    placement="right"
    width="400"
    trigger="click"
    style="position: relative">
    <el-table :data="gridData">
      <el-table-column width="150" property="date" label="日期"></el-table-column>
      <el-table-column width="100" property="name" label="姓名"></el-table-column>
      <el-table-column width="300" property="address" label="地址"></el-table-column>
    </el-table>
    <el-button slot="reference">click 激活</el-button>
</el-popover>

<script>
export default {
  data() {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll() {
      this.$refs.popover.updatePopper()
    }
  }
};
</script>