When using el-popover in el-table to click the cancel button, the problem of displaying and hiding the popover box

When using the popover pop-up box directly, there is no problem, but when the popover pop-up box is used in the el-table, the popover box will not be hidden, even if the v-model binding value is used, it will not work. The
solution is as follows
1. Add an attribute in el-popover: :ref=" popover-${scope.$index}"
2. Add a click event to the cancel button and add a scope parameter

<el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              :ref="`popover-${scope.$index}`">
              <p>是否已经回访完毕？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="cancelBtn(scope)">
                  取消
                </el-button>
              </div>
              <el-button slot="reference">回访</el-button>
            </el-popover>
          </template>
</el-table-column>

3. Call doClose() in the methods method: scope._self.refs $refs[‘popover-${scope.$index}`].doClose()

cancelBtn (scope) {
  scope._self.$refs[`popover-${scope.$index}`].doClose()
}

Blog migrated to GitHub