vue+elementUI input框之过滤显示

 效果图如下:

<el-form-item label="Test Filter: ">
  <el-autocomplete
      class="inline-input"
      v-model="form.filter"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
  ></el-autocomplete>
</el-form-item>
methods:{
  querySearch(queryString,cb){
    let arr = [
      {name:'a',value:'he is a gril'},
      {name:'b',value:'good name'},
      {name:'c',value:'how boy'},
    ];
    let results = queryString ? arr.filter((currentValue,index,arr) => {
      console.log(currentValue);//item的每一项
      console.log(arr);//arr数组
      return (currentValue.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);//满足条件的返回
    },this):arr;
    cb(results)
  },
}

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue 中使用 ElementUI 表格进行搜索,你可以使用两种方法: 1. 使用 ElementUI 的 el-input 组件来实现搜索功能 在表格上方添加一个输入,用户可以在其中输入搜索关键字,然后使用 JavaScript 过滤表格数据并更新表格。 HTML: ``` <template> <div> <el-input v-model="searchText" placeholder="请输入搜索关键字"></el-input> <el-table :data="tableData.filter(item => item.name.includes(searchText))"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> ``` JavaScript: ``` export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 } ], searchText: '' }; } }; ``` 2. 使用 ElementUI 的 el-form 组件来实现搜索功能 这种方法可以将搜索关键字与其他筛选条件一起提交到后端进行处理,然后根据后端返回的数据来更新表格。 HTML: ``` <template> <div> <el-form :inline="true" :model="form"> <el-form-item label="姓名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄"> <el-input v-model="form.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">搜索</el-button> </el-form-item> </el-form> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> ``` JavaScript: ``` export default { data() { return { tableData: [], form: { name: '', age: '' } }; }, methods: { submitForm() { // 向后端提交搜索条件,并获取返回数据更新表格 } } }; ``` 以上是两种使用 ElementUI 表格进行搜索的方法,你可以根据自己的需求选择适合自己的方法。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值