美文网首页
el-table 中使用 el-popover 点击取消按钮时

el-table 中使用 el-popover 点击取消按钮时

作者: Avery_G | 来源:发表于2020-12-01 18:00 被阅读0次

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

    解决方法如下

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

    :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() :

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

    具体如下:

    cancelBtn (scope) {

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

    }

    相关文章

      网友评论

          本文标题:el-table 中使用 el-popover 点击取消按钮时

          本文链接:https://www.haomeiwen.com/subject/sxnswktx.html