el-table 中使用 el-popover 点击取消按钮时 popover 框的显示与隐藏问题

相关文章推荐

体贴的拐杖 · 【电影情不自禁】【潘粤明】【小白】_哔哩哔哩 ...· 4 月前 ·

没人理的瀑布 · 青衣王妃传(竤贝贝)全本在线阅读-起点中文网 ...· 7 月前 ·

飞奔的大脸猫 · 元曲四大家之首关汉卿代表作盘点，关汉卿代表作 ...· 7 月前 ·

痴情的数据线 · UCL Offer ...· 8 月前 ·

从未表白的登山鞋 · 世界上最轻的固体——气凝胶· 1 年前 ·

直接使用 popover 弹出框的时候，是没有任何问题的，但是在 el-table 中使用 popover 弹出框就会出现，点击取消按钮， popover 框不会隐藏，即使使用 v-model 绑定值，也是不管用的

解决方法如下

1	:ref="`popover-${scope.$index}`"

2.取消按钮添加点击事件，添加 scope 参数

<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. methods 方法中调用 doClose() ：

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

具体如下：

1
2
3

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

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置： jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true

1.在 el-popover 中添加属性：

2.取消按钮添加点击事件，添加 scope 参数

3. methods 方法中调用 doClose() ：