筛选是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 表格筛选的更多相关文章

  1. vue+element 表格formatter数据格式化并且插入html标签

    前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...

  2. vue+Element 表格中的树形数据

    template部分   只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...

  3. vue element-ui 表格筛选,点击筛选数据

    <el-table-column prop="productEnvVersion" label="运行环境" :filters="this.ru ...

  4. vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条

    相信有很多小伙伴遇到过这个问题,首先还是来看图片,筛选框我做了处理,所以和官网的有点小差别 官方网站和个人网站对比图如下: 代码如下:(F12找到该元素的class,设置高度) .el-table-f ...

  5. vue+element 表格导出Excel文件

    https://www.cnblogs.com/bobodeboke/p/8867481.html  非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...

  6. vue+element表格

    效果图 备注:前后端分离实现效果 接下来是代码环节 <template>   <div class="comprehensive-table-container" ...

  7. vue+element 表格按需合并

    这个功能难度感觉一般般吧,记录一下,以后碰到了直接来复制,懒得再写了 效果如下: 前6列是合并,后面的有几行,动态显示几行 重点是在数据处理上面做文章,合并列大家都会,数据处理呢?这样来处理, 我们拿 ...

  8. vue+Element 表格编辑

    先上效果 <template> <div> <el-table :data="tableData" style="width: 100%&q ...

  9. Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

随机推荐

  1. Sitecore A / B测试

    测试您的Web内容非常重要.这是查看页面中的页面和组件是否达到预期效果的好方法.测试还可以让您放心,您的内容足够吸引人,以增加转化次数并最大限度地提高增长率. 测试如何运作? 测试通过向访问者随机显示 ...

  2. sql server的for xml path与变通的行转列

    SQL Server中有提供一个FOR XML PATH的子句(不知道能不能叫函数),用来将查询结果行输出成XML格式,我们可以通过这个语法做一些变通实现一些特定的功能,比如说行转列.要会变通的话,当 ...

  3. scala中分组的算子的用法

    val rdd= sc.parallelize(List(("tom",1),("jerry",3),("kitty",2),(" ...

  4. c# 类实例序列化反序列化json文件 (原发布 csdn 2017-10-01 20:02:12)

    前言 前段时间使用了net.json保存对象数据.添加完成后,测试发现300多实例数据保存加载json文件,速度比原方式(BinaryFormatter)慢.但是功能加上后也懒再删掉代码了,索性就采用 ...

  5. asp.net SQLite关于各版本的调试

    最近想做一个简版的管理系统,将SQL SERVER数据库切换到SQLite数据库中,采用的是SQLite3的版本数据库. 开发工具:SV2015 UP3 数据库:SQLite3 项目整体结构图 相同的 ...

  6. Linux 下的 mysql 自动备份

    Linux 下实现自动备份,主要就是编写好执行备份的 shell script( *.sh )文件,设好权限(可读,可执行).然后利用 Linux 定时任务 crontab 来执行备份脚本就可以了.以 ...

  7. springboot启动报错,Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.

    报错: Error starting ApplicationContext. To display the conditions report re-run your application with ...

  8. MySQLDump--导出数据脚本异常

    在一次使用mysqldump导出数据过程中,发现导出SQL无法正常执行,仔细观察后发下导出脚本为: (,,,,' Yimu(id:5085297)',''¥','[新教室V32] ',15593224 ...

  9. win10自带截屏操作

    1.win+shift+S,自由截屏 2.win+W,截屏后编辑 3.alt+PrtSc,截取当前活动界面,鼠标在微信就是微信,在浏览器就是浏览器.在桌面就是所有界面. 4.PrtScn,截取所有屏幕 ...

  10. windows 桌面文件变成.link解决方案

    在注册表中右键删除下面这个注册表项: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.ln ...