解决 el-table el-popover点击无效问题 element

百度后一直没有资料 遂写下记录一下

问题表格渲染后第一次是可以点击有效的，点击分页popover无效，审查元素发现buttom的aria-describedby="el-popover-xxxxxxxx" 没有这属性， 思考发现是v-if的问题，改成:class 显示隐藏或v-show就可以了

 

<el-table-column label="" width="150">
    <template slot-scope="scope">
        <el-popover trigger="click" placement="left" ref="popover" visible-arrow="false">
               
        </el-popover>
         <el-button v-popover:popover v-show="isShow" @show="editRow(scope.$index, tableData)" type="text" size="small">点击查看</el-button> 
    </template>
</el-table-column>

 

做了还发现其他问题

解决 el-table 中最后一行的 el-popover 无法点开问题

解决问题来自这位大佬：https://blog.csdn.net/qq_34319049/article/details/93486637

出现问题代码

<el-table-column label="" width="150">
    <template slot-scope="scope">
        <el-popover trigger="click" placement="left" ref="popover" visible-arrow="false">
               
        </el-popover>
         <el-button v-popover:popover @show="editRow(scope.$index, tableData)" type="text" size="small">点击查看</el-button> 
    </template>
</el-table-column>

 

改进代码

<el-table-column label="" width="150">
    <template slot-scope="scope">
        <el-popover @show="editRow(scope.$index, tableData)" trigger="click" placement="left" visible-arrow="false">
            <el-button slot="reference" type="text" size="small">点击查看</el-button> // 点开 el-popover 显示的内容
          
        </el-popover>
    </template>
</el-table-column>