Vue+Element实现表格筛选

安装Vue和el什么的就不说了，也吐槽样式丑，作者懒得写样式主要是为了展示写法和功能虽然我自己都想吐槽

<template><div style="margin-top: 150px;"><div>Vue表格过滤</div>
<el-row :gutter="20" style="margin-bottom:35px;" type="flex" justify="space-between"><el-col :span="8"><el-input placeholder="请输入姓名" v-model="input1" class="input-with-select"  @change="getvalue1"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col><el-col :span="8"><el-input placeholder="请输入省份" v-model="input2" class="input-with-select" @change="getvalue2"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col><el-col :span="8"><el-input placeholder="请输入邮箱" v-model="input3" class="input-with-select" @change="getvalue3"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col>
</el-row>
<el-table:data="tableData"borderstyle="width: 100%"><el-table-columnfixedprop="date"label="日期"width="150"></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="province"label="省份"width="120"></el-table-column><el-table-columnprop="city"label="市区"width="120"></el-table-column><el-table-columnprop="address"label="地址"width="300"></el-table-column><el-table-columnprop="zip"label="邮编"width="120"></el-table-column><el-table-columnfixed="right"label="操作"width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button></template></el-table-column></el-table></div>
</template><script>import {min} from '../min.js'export default {name: 'app_download',mixins: [min],data() {return {input1: '',input2: '',input3: '',tableData: [{date: '2016-05-02',name: '王小虎',province: '镐京',city: '普陀区',address: ' 1518 弄',zip: 5435}, {date: '2016-05-04',name: '王大雷',province: '天津',city: '普陀区',address: '上海市普陀区3432432金沙江路 1517 弄',zip: 200213333}, {date: '2016-05-01',name: '王大大',province: '北京',city: '普陀区',address: '上海市普34324陀区金沙江路 1519 弄',zip: 2132}, {date: '2016-05-03',name: '王菲',province: '南京',city: '普陀区',address: '上海市普陀区242433金沙江路 1516 弄',zip: 213}]}},methods: {getvalue1(){const data=this.tableDatadata.forEach((item,index)=>{if(item.name==this.input1){this.tableData=data.splice(index,1)}})this.input1=''},getvalue2(){const data=this.tableDatadata.forEach((item,index)=>{if(item.province==this.input2){this.tableData=data.splice(index,1)}})this.input2=''},getvalue3(){const data=this.tableDatadata.forEach((item,index)=>{if(item.zip==this.input3){this.tableData=data.splice(index,1)}})this.input3=''},handleClick(row) {console.log(row);}},created() {console.log(min)},mounted() {},}
</script>

Vue+Element实现表格筛选相关推荐

vue element计算表格合计问题
vue element计算表格合计问题问题:当表格的el-table-column标签下的属性prop属性值为'对象.属性'时,将不能自动合计. 例如: <el-tableborderv-lo ...
vue element el-table表格勾选求和 el-table 勾选获取表格某几列数据求和
vue element el-table 表格勾选获取几列数据求和 el-table表格勾选求和先看案例如下图所示:el-table 勾选后求出支付金额数据,计算出总金额数据. 我们来一步步分析方便 ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示
vue element el-table 表格搜索搜索表格内容关键字标红关键字高亮显示最近公司项目需求,搜索表格的内容,并且需要搜索的关键字高亮显示(关键字标红),如图所示最终效果: 1.在需要 ...
vue elmenetui admin表格筛选列（动态显示）
转载自:https://blog.csdn.net/weixin_44835598/article/details/116056565 <template><div class=&q ...
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
一.效果图目前10种筛选类型看看是否是你需要的,本文可能有点长 ,我尽可能的给讲清楚,包括源码附上二.无聊发言点击当前行跳转部分数据后缀追加图标某列数据根据状态增加颜色标识三.前言实现 ...
vue element ui表格下载成xlsx工作表格
我们需要两个依赖打开项目终端输入 npm i file-saver -S 和 npm i xlsx -S 在需要使用的组件中引入依赖 import FileSaver from 'file-sav ...
Vue+element 实现表格的动态增加行
功能需求:1.实现一个表格,可以增加行 ,可以修改每一行的数据: 2.获取选中的行的数据,获取选中行的索引:3.根据获取的行的索引删除相应的一行的数据. tableData的数据是写死的,具体开发可以 ...
Vue + Element UI 表格分页记忆选中，分页切换页面打勾不丢失
方法一: 官方也有基于这种操作给出通过属性解决的方法: <el-table :row-key="rowKey"><el-table-column type=&qu ...

Vue+Element实现表格筛选

Vue+Element实现表格筛选相关推荐

最新文章

热门文章