解决Vue ElementUi 表格,点击超长的文本,进入下一页面tooltip不消失问题

这篇博客探讨了在页面切换后,悬浮提示元素(tooltip)仍然显示的问题。作者提供了一个JavaScript解决方案,通过获取并修改class为'el-tooltip__popper'的元素样式,将其display属性设置为'none'。若DOM未完全更新,建议使用this.$nextTick()确保操作在DOM更新后执行。
摘要由CSDN通过智能技术生成

如下图文本点击
在这里插入图片描述
进入下个页面后,一直悬浮不消失
在这里插入图片描述

解决方案:
closeTooltip () {
  let list = document.getElementsByClassName('el-tooltip__popper')
    if (list.length > 0) {
      list[list.length - 1].style.display = 'none'
    }
 }

如果DOM没更新完的,需要加上 this.$nextTick()

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
你可以使用 Element UI 中的表格组件和输入框组件来实现表格点击搜索的功能。具体步骤如下: 1. 在表格上方添加一个输入框组件,用户输入搜索关键字; 2. 监听输入框的输入事件,将输入的关键字作为参数传递给后台接口调用; 3. 后台接口返回符合搜索条件的数据列表; 4. 将返回的数据列表渲染到表格中。 下面是一个简单的示例代码: ```html <template> <div> <el-input v-model="keyword" placeholder="请输入搜索关键字" @input="handleSearch"></el-input> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { keyword: '', tableData: [] } }, methods: { handleSearch() { // 调用后台接口,传递搜索关键字参数 // 此处省略后台接口调用过程 // 假设返回的数据格式为 { name: string, age: number, address: string }[] this.tableData = [ { name: '张三', age: 20, address: '北京市海淀区' }, { name: '李四', age: 25, address: '上海市浦东新区' }, { name: '王五', age: 30, address: '广州市天河区' } ] } } } </script> ``` 在上面的示例代码中,我们使用了 Element UI 中的输入框组件和表格组件来实现了表格点击搜索的功能。当用户在输入框中输入关键字时,会触发 handleSearch 方法,该方法会调用后台接口查询数据,并将查询结果渲染到表格中。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值