vue 模糊查询/过滤筛选条件

小阳生煎

已于 2023-04-07 13:46:44 修改

阅读量2.8k

点赞数 2

分类专栏： # Vue2 # Element 文章标签： vue.js javascript

于 2021-09-03 10:31:55 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/120074659

版权

Vue2 同时被 2 个专栏收录

110 篇文章 4 订阅

订阅专栏

Element

24 篇文章 0 订阅

订阅专栏

过滤筛选条件

通过点击button进行筛选符合条件
我们实现watch进行监听处理即可

在这里插入图片描述

// html

 <el-input  clearable size="small" style="width: 30%; 
 margin-right:2%;" placeholder="请输入内容" v-model="entValue">
 
 <el-button @click="btnSel" slot="append" icon="el-icon-search">
 </el-button></el-input>
 //对应表格数据
 <el-table :data="listDate"  border >
 <el-table-column type="index" label="#" width="50">
</el-table-column>
<el-table-column prop="goods_name" label="商品名称width="500">
 </el-table-column>
</el-table-column>

模糊查询

// js
data(){
  entValue: '',//我们在data定义一个input值得空value
  listDate: [],//定义一个空数组
},
  methods: {
        getTab() {
            let params = {
                query: this.entValue,//查询参数(就是input的value值)
                pagenum: this.pagenum,
                pagesize: this.pagesize
            }
            math.getGoods(params).then((res) => {
                this.listDate = res.data.goods//得到表格数据内容
                this.total = res.data.total
            })
        }},
      watch:{//使用监听watch(监听查询input的value值)
        entValue(newName, oldName) { 
            if (newName==''||  oldName=='') { 
           //让新值与老值都为空时，触发表格数据内容
              this.getTab(this.pagenum)
            }
        }
    },    

    /* Ps  
     监听的value值对应2个参数 分别为新值 老值
     模糊搜索时 判断老值是否为空就会进行模糊筛选
     其次当input值清空时对应新值 让其恢复最初数据 判断新值是否为空即可
   */

过滤筛选

这种是待button按钮进行点击筛选条件
我们只需要调取后端的查询入参即可

但是要进行监听当input为空时恢复最初显示表格数据
使用watch即可

data(){
  entValue: '',//我们在data定义一个input值得空value
  listDate: [],//定义一个空数组
},
  methods: {
        getTab() {
            let params = {
                query: this.entValue,//查询参数(就是input的value值)
                pagenum: this.pagenum,
                pagesize: this.pagesize
            }
            math.getGoods(params).then((res) => {
                this.listDate = res.data.goods//得到表格数据内容
                this.total = res.data.total
            })
        }},
      watch:{//使用监听watch(监听查询input的value值)
        entValue(newName, oldName) { 
            if (newName=='') { 
           //新值为空时，触发表格数据内容，显示总数据
              this.getTab(this.pagenum)
            }
        }
    },