VUE element-ui之table表格表头下拉筛选功能

简介: VUE element-ui之table表格表头下拉筛选功能

步骤:

在需要筛选的列中插槽法:

<el-table-column prop="mount" label="交易量区间" align="left">
          <!-- eslint-disable-next-line -->
          <template slot="header" slot-scope="scope">
            <el-dropdown trigger="click" size="medium " @command="handleCommand">
              <span style="color:#909399">
                {{ menuText }}<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in section"
                  :key="index"
                  :command="item"
                >
                  {{ item }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>

data中定义下拉列表:

data() {
    return {
      menuText: '交易量区间',
      section: [
        '一万',
        '两万',
        '三万'
      ]
    }
}

在methods中定义筛选方法:

 // 表格筛选
    handleCommand(item) { //这里定义方法可在选取时触发
      this.menuText = item
    }

效果如图:
在这里插入图片描述
在这里插入图片描述

相关文章
|
2月前
|
JavaScript 前端开发 API
|
2月前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
25 1
|
2月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
|
3月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
4月前
|
存储 JavaScript
任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现
这篇文章介绍了使用Vue实现的任务清单小功能,包括任务的增加、删除、修改、查看以及数据存储。文章通过视频演示展示了实现效果,重点讲解了编辑功能的实现,并通过代码实例展示了编辑功能的核心代码,同时提供了完整的代码下载链接以及以往练习的概览。
任务清单小功能的实现(任务的增、删、改、查、存储)使用Vue实现
|
3月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
108 2
|
4月前
|
前端开发 JavaScript UED
element-ui 表格数据究竟隐藏着怎样的神秘样式与格式化技巧?快来揭开谜底!
【8月更文挑战第22天】《element-ui 表格数据样式及格式化案例》展示了如何利用 element-ui 的表格组件实现美观且易读的数据展示。通过简单配置,可以自定义表格样式,如边框、背景色等,并通过 formatter 实现数据格式化,例如将成绩保留一位小数。此外,还能依据条件设置行样式,如成绩达优则高亮显示,从而增强用户体验和数据可读性。
68 1
|
4月前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
723 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
4月前
|
JavaScript
基于Vue3+TS简单设计一个查看文章时点击展开和点击收起的小功能
该文章展示了如何使用Vue 3和TypeScript创建一个简单的展开和收起功能,用于文章查看时的交互体验。
141 0
基于Vue3+TS简单设计一个查看文章时点击展开和点击收起的小功能
|
4月前
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
404 0
Element UI & Element Plus之改变表格单元格颜色