【element-ui】element-ui popover 问题

Z时代
2024-01-10
分类：技术分享

1.采用element-ui实现目标：

鼠标移入操作栏中灰色通过按钮（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>