首页 / 问答 / Vue.js结合element-ui的Dropdown下拉菜单和Table表格组件如何实现下拉表格?

Vue.js结合element-ui的Dropdown下拉菜单和Table表格组件如何实现下拉表格?

Vue Element UI 417 次浏览
0

在使用Vue.js和element-ui进行前端开发的时候,需要实现一个下拉表格的效果,即:在一个下拉列表中展示一个数据表格,效果类似下图:

应该如何实现这样的下拉表格效果呢?

回复 [×]
提交评论
请输入评论内容

1 个回答

  • 0

    element-ui的官方并没有直接提供下拉表格的组件,但这种下拉表格的应用场景在实际的开发中是比较常见的,特别是在一些中后台的管理系统中。

    虽然element-ui没有下拉表格的组件,但提供了下拉菜单(Dropdown)和表格(Table)组件,所以,我们可以结合这两个组件来自已实现下拉表格的效果,如下:

    HTML:

    CSS:

    JavaScript(Vue.js):

    实现方案中主要利用了下拉菜单(Dropdown)的插槽slot="dropdown",将表格(Table)组件放到下拉菜单的插槽里,然后监听表格的行单击事件(row-click)以获取当前单击的行的数据。

    预览效果如下:

    在线预览地址:点击这里

    Rector的个人主页

    Rector

    1个月前 回答

    我来回答