element-ui popover 问题

1.采用element-ui实现目标:
clipboard.png

鼠标移入操作栏中 灰色通过按钮(el-buttons设disabled),显示相应行poppver,移出popover消失

2.官方文档中采用 点击 + v-popover:popover2 方式实现,但是目前希望鼠标移入实现弹出popover,而且el-button设为disabled,无法点击,不知道如何实现?

3.用v-modal实现效果,但是存在问题:无论移入一栏操作,显示的popover不对,非对应行,操作列代码如下

   <el-table-column  label="操作" width="250">
    <template slot-scope="scope">
        <el-popover :disabled="!scope.row.agree" ref="popover{{$index}}" placement="top-end" width="160" v-model="showAgreePopover">
          <p>这是一段内容这是一段内容确定删除吗?{{scope.row.end_time}}</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="clickAgreeFromPopover(false, scope.row.id)">取消</el-button>
            <el-button type="primary" size="mini" @click="clickAgreeFromPopover(true, scope.row.id)">确定</el-button>
          </div>
        </el-popover>
        <el-button type="text" :disabled='!scope.row.agree' size="mini" @click="agree(scope.$index, scope.row)">通过</el-button>
        <el-button type="text" size="mini" @click="notAgree(scope.$index, scope.row)">驳回</el-button>
    </template>
  </el-table-column>
阅读 10.6k
1 个回答

自己解决了,思路:popover设置trigger=hover,即可解绝触发问题,剩余代码同官方文档

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题