Vue+ElmentUI在table表格中表头位置插入Dropdown下拉菜单实现过滤效果_table 表头下拉框

作者：我家自动化 | 2024-07-19 10:05:49

踩

table 表头下拉框

在el-table的表头插入一个下拉菜单Dropdown鼠标悬停下拉框浮现，点击下拉框选项就可以进行页面信息过滤。

在这里插入图片描述

在这里插入图片描述

1. 首先需要在表格里的表头位置加入下拉框，需要通过组件slot来设置下拉触发的元素以及需要通过具名slot为dropdown 来设置下拉菜单。所以就有slot="header"这个具名插槽引入。

这段可参看图片中的第一条横线位置

2. 设置鼠标悬停时就能出现下拉菜单，这个要用到trigger这个属性，这个属性是用来控制下拉框的出现。默认情况下，下拉按钮只要hover即可，无需点击也会显示下拉菜单。

这里可参考图片中的圈圈部分，关于trigger的说明可以参考下面官方文档中的说明。

在这里插入图片描述

3. 点击菜单项后会触发事件

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/850814