element table模糊查询

先了解一下computed和watch:

computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上**进行双向数据绑定**展示出结果或者用作其他处理; 
computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择

与watch之间的区别:
watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象,只能监控整个对象或单个变量。watch一般用于监控路由、input输入框的值特殊处理等等,它比较适合的场景是一个数据影响多个数据

用element table做一个模糊查询
代码:

<template>   //中间有省略
 <el-form :inline="true"  class="demo-form-inline" style="float: left;margin-top: 10px">
    <el-form-item >
      <el-input v-model="search" placeholder="请输入搜索内容"></el-input>  //自动查询
    </el-form-item>
  </el-form>
  <el-table
    :data="this.tables"
     highlight-current-row
    >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
     <el-table-column
      prop="employeeId"
      label="员工号"
      sortable
      width="200">
    </el-table-column>
    </template>
   <script>
  import axios from 'axios'
  export default {
    data() {
      return {
        tableData: [],
        search: ''
      }
    }, //重点在下面
    computed: {
      // 模糊搜索
      tables:function() {
        const search = this.search
        if (search) {
          // filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
          // 注意: filter() 不会对空数组进行检测。
          // 注意: filter() 不会改变原始数组。
          return this. tableData.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            // some() 方法会依次执行数组的每个元素:
            // 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测;
            // 如果没有满足条件的元素,则返回false。
            // 注意: some() 不会对空数组进行检测。
            // 注意: some() 不会改变原始数组。
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置,如果没有找到就返回-1;
              // 该方法对大小写敏感!所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.tableData;
      }
    },
    methods:{
  }}
  </script>

这个查询只是在当前页面的数据查询,后期会做从后台查到数据返回
今天还学到一个怎么生命全局变量
在data里面声明一个a,在方法中用this.a就可以用了
还可以用return

  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 安装Element UI 要在Vue项目中使用Element UI,需要先安装Element UI。可以通过以下命令来安装Element UI: ``` npm install element-ui --save ``` 2. 引入Element UI 在Vue项目中使用Element UI,需要在Vue的入口文件(通常是main.js文件)中引入Element UI: ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 创建一个带有搜索框的页面 在Vue组件中创建一个搜索框和搜索结果表格,如下所示: ```html <template> <div> <el-input v-model="keyword" placeholder="请输入搜索关键字"></el-input> <el-button type="primary" @click="search">搜索</el-button> <el-table :data="searchResult"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { keyword: '', searchResult: [] } }, methods: { search() { // TODO: 实现模糊查询 } } } </script> ``` 4. 实现模糊查询 在search方法中,可以调用后端API来获取与关键字匹配的数据,然后将结果显示在表格中。以下是一个例子: ```javascript search() { axios.get('/api/search', { params: { keyword: this.keyword } }).then(response => { this.searchResult = response.data }).catch(error => { console.log(error) }) } ``` 在后端API中,可以使用数据库的LIKE语句来实现模糊查询,例如: ```sql SELECT * FROM users WHERE name LIKE '%关键字%' ``` 5. 完成 现在,已经可以在Vue项目中使用Element UI来实现模糊查询了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值