vue Element-ui 表格自带筛选框自定义高度

el-table中可以在一行的某列进行筛选,代码如下:

 <el-table-column prop="classOfTest" class="test" label="测试类名" :filters="classList" filter-placement="bottom-start" width="300" column-key="testOfClass"></el-table-column>

其中 filters 就是筛选列表,格式为 classList = [{text: ‘Test_配电箱自动识别‘, value: ‘Test_配电箱自动识别‘},{text: ‘Test_门自动识别‘, value: ‘Test_门自动识别‘},……]

filter-placement 指定了筛选框的位置。

界面图如下:

在筛选的数据项比较少的情况下,可以正常展示,但是如果筛选的数据项很多,这样一屏就展示不全,所以需要添加样式进行控制,可以通过chrome的F12打开控制台,然后找到该筛选框,重写样式:

1  .el-table-filter {
2     max-height: 500px;
3     overflow: auto;
4   }

原文地址:https://www.cnblogs.com/x123811/p/8874223.html

时间: 2024-10-11 08:36:35

vue Element-ui 表格自带筛选框自定义高度的相关文章

element ui 表格提交时获取所有选中的checkbox的数据

<el-table ref="multipleTable" :data="appList" @selection-change="changeFun"> <el-table-column type="selection" width="55" class="selection" prop='uuid' :selectable='checkboxInit' @select

vue + element ui 阻止表单输入框回车刷新页面

问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交. 测试 下面的代码出现表单回车提交 <body> <div id="app"> <el-form ref="form" :model="form" label-width="80px"&

vue+element UI实现分页组件

1.前言 在web页面中,常常需要将后台查询到的数据以表格形式展示出来,而这些数据量往往会非常庞大,如果将所有要展示的数据一次性请求获取并展示到页面上,那页面长度势必会变得非常的长,很不美观.更重要的是,如果数据量过于大,在页面加载时一次性请求全部数据将会耗费大量网络资源,性能极低.但是,如果我们可以将数据分页展示,这样页面首先不会变的冗长,另外只有用户点击页码才会发出请求并且每次请求的数据量也不会很大,这就极大的节省了网络资源,提高了性能.本文就以vue结合element UI实现一个数据分页

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-

vue+element UI实现多级导航菜单

1.前言 在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可能是多级的,所以我们需要使用递归的方式,一层一层的递归数据,将多级菜单完整显示出来.本篇博文借助element UI组件库中的Navmenu导航菜单组件,将其进行改造后封装成一个多级导航菜单组件. 2.工作流程 组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据传

vue element UI el-table 给表格添加复选框,并得到所选值

<el-table @selection-change="changeCheckBoxValue" v-bind:data="this.requireData" v-loading="this.tableLoading" border style="width:100%" > <el-table-column min-width='140' type="selection"><

vue + element ui table表格二次封装 常用功能

因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data="tableData" size="medium" ref="multipleTable" border fit @sort-change="handleSort" @filter-change="filterHandler&

VUE+Element UI实现简单的表格行内编辑效果

原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <!-- 引入样式 --> 7 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/

vue+element ui项目总结点(三)富文本编辑器 vue-wangeditor

1.参考 https://www.npmjs.com/package/vue-wangeditor 使用该富文本编辑器 <template> <div class="egit_box"> <p>富文本编辑器试用</p> <div class="text_box" style="width: 100%;display: flex;justify-content: center;"> <