vue+element 表格筛选
筛选是element 组件 自己有的东西,按照文档撸 是没有问题
这里存在一个情况是,如果 筛选 的数据没有 那么整个表格为空白,产品要加提示 例如:暂无筛选的数据
解决方案:通过 ref 获取整个table 里面有一个tableData(就是当前表格数据,我的是这个),这个一个数组,可根据这个数据进行判断筛选后的数据是否为空
补充:会出现筛选不符合条件 出现 提示,点击重置按钮时 提示依然存在的问题
根据 filter-change 方法 进行判断
<template>
<el-table ref="filterTable" :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" sortable width="180" column-key="date"></el-table-column> //sortable 属性 排序作用
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址" ></el-table-column>
<el-table-column
prop="tag"
label="标签"
width="100"
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" //这里是代表有多少个筛选项 格式 必须为数组对象,并且每个对象必须有 text 和 value key值
:filter-method="filterTag" //可以理解为过滤 方法 ,一共有value , row , column 可以依次打印看看咯
filter-placement="bottom-end" //代表弹框打开的位置
>
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions
>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
</el-table>
</template> <script>
export default {
components: {},
name: "table-filter",
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "张小虎",
address: "上海市普陀区金沙江路 1518 弄",
tag: "家"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
tag: "公司"
},
{
date: "2016-05-01",
name: "鲁小虎",
address: "上海市普陀区金沙江路 1519 弄",
tag: "家"
},
{
date: "2016-05-03",
name: "鞠磊小虎",
address: "上海市普陀区金沙江路 1516 弄",
tag: "公司"
}
]
};
},
created() {},
mounted() {},
methods: {
//筛选方法,返回的是 true or false
filterTag(value, row, column) {
return row.tag === value;
}
}
};
</script>
vue+element 表格筛选的更多相关文章
- vue+element 表格formatter数据格式化并且插入html标签
前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...
- vue+Element 表格中的树形数据
template部分 只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...
- vue element-ui 表格筛选,点击筛选数据
<el-table-column prop="productEnvVersion" label="运行环境" :filters="this.ru ...
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别 官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...
- vue+element 表格导出Excel文件
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...
- vue+element表格
效果图 备注:前后端分离实现效果 接下来是代码环节 <template> <div class="comprehensive-table-container" ...
- vue+element 表格按需合并
这个功能难度感觉一般般吧,记录一下,以后碰到了直接来复制,懒得再写了 效果如下: 前6列是合并,后面的有几行,动态显示几行 重点是在数据处理上面做文章,合并列大家都会,数据处理呢?这样来处理, 我们拿 ...
- vue+Element 表格编辑
先上效果 <template> <div> <el-table :data="tableData" style="width: 100%&q ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
随机推荐
- eclipse打开本地文件所在目录位置的快捷键
在开发的过程中总是会遇到需要在本地文件夹找到该本地文件的情况,比如说要发送给同事什么的. 在使用Eclipse的过程中,大多数人都是先在Eclipse目录中定位到文件,然后通过在文件的右键属性中找到文 ...
- Spring Boot 运行原理 - 核心注解
https://www.jianshu.com/p/23f504713b94 核心注解 打开上面任意一个AutoConfiguration文件,一般都有下面的条件注解,在spring-boot-aut ...
- U9 DLL读取配制文件
在网上大多数的例子都是如何访问程序运行的目录下的配制文件,但是U9BP里要将DLL放到生产环境,我并不知道生产环境运行的目录,所以只能DLL读取当前目录XML. 过下面几个方法都可以拿到程序所在的文件 ...
- 关于使用PreApplicationStartMethod实现module注册问题
在使用PreApplicationStartMethod实现module注册问题发现一个问题: //用PreApplicationStartMethod实现自注册模块 [assembly: PreAp ...
- Python——数据分析,Numpy,Pandas,matplotlib
由于图片内容太多,请拖动至新标签页再查看
- 将Python源程序打包成可独立执行的文件
有时候需要将编写好的脚本发送给别人,但是在没有安装运行环境或依赖库的情况下,Python脚本程序无法执行.PyInstaller工具可以快速的将python脚本打包成一个二进制可执行的exe程序,并且 ...
- win10安装MySQL5.6.
我分了两种下载安装的方式给大家看,注意数据库这个东西不在乎版本是不是最新,在乎的是够稳定,现在公司中常用的是mysql5.5和mysql5.6的版本,我现在就用mysql5.6的版本给大家来演示一下: ...
- 设置ItelliJ IDEA里修改jsp不重启tomcat
设置ItelliJ IDEA里修改jsp不重启tomcat On Upate Action 与 On Frame Deactivation 这两个选项的设置,依赖于 项目的部署方式 是war包 还是 ...
- svn更换repos时保留svn log
两种情况 1. 直接移动库 问题:svn如何把A服务器上的reposA上传到B服务器的reposB并保留各种上传更新记录? 这个问题要感想敢干,直接复制改名即可 #登录到B服务器 scp -r cmo ...
- 判断cms-暴库-后台查找-密码破解
1.判断网站CMS类型 判断目标 使用工具: 脚本语言 wvs 御剑 domain明小子 操作系统 wwwscan 啊d pangolin(穿山甲) 搭建平台 站长工具 netpark ...