vue纯前端查询功能

最新推荐文章于 2024-03-12 11:33:56 发布

huangst1124

最新推荐文章于 2024-03-12 11:33:56 发布

阅读量386

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/huangst1124/article/details/128930053

版权

直接查询

el-table列表查询不展示，本部分展示div循环查询
直接输入文本框即可查询！

<template>
<div>
<el-input
  v-model="name"
  placeholder="名称"
/>
<div v-for="(item,index) in cameraConfigList" :key="index">
<el-row :gutter="3">
   <el-col :span="12">
      <canvas :id="'video-canvas' + item.washhandCameraId" class="video-canvas"/>
   </el-col>
   <el-col :span="12">
      <canvas :id="'video-canvas' + item.faceCameraId" class="video-canvas"/>
   </el-col>
 </el-row>
</div>
</template>

<script>
export default {
data() {
   return {
     name: '', // 查询值
     list: [ // 所有数据
	     {
	     washhandCameraId: 1
	     faceCameraId: 2
	     },
	     {
	     washhandCameraId: 3
	     faceCameraId: 4
	     }
     ]
   }
 },
computed: {
 // 查询输出有值
cameraConfigList() {
if (this.name) {
   var that = this
   this.list.filter(function(item) {
    if (item.name.indexOf(that.name) > -1) {
      // 查得到索引则返回给定义的cameraConfigList
      return item.name.indexOf(that.name) > -1
     }
    })
   }
   // 查询输出无值
   return this.list
  }
 }
}
</script>

间接查询

输入文本框点击查询按钮间接查询！

<template>
<div>
<el-input
  v-model="name"
  placeholder="名称"
/>
<el-button v-waves type="primary" icon="el-icon-search" @click="onSearch">
  查询
</el-button>
<el-button type="info" icon="el-icon-refresh" @click="reset">
  重置
</el-button>
<div v-for="(item,index) in cameraConfigList" :key="index">
<el-row :gutter="3">
   <el-col :span="12">
      <canvas :id="'video-canvas' + item.washhandCameraId" class="video-canvas"/>
   </el-col>
   <el-col :span="12">
      <canvas :id="'video-canvas' + item.faceCameraId" class="video-canvas"/>
   </el-col>
 </el-row>
</div>
</template>
<script>
export default {
data() {
  return {
    name: '', 
    cameraConfigList: [],
    list: [ // 所有数据
	     {
	     washhandCameraId: 1
	     faceCameraId: 2
	     },
	     {
	     washhandCameraId: 3
	     faceCameraId: 4
	     }
     ]
  }
},
methods: {
//查询
 onSearch() {
   if (this.name) {
     var that = this
     this.cameraConfigList = this.list.filter(function(item) {
       if (item.name.indexOf(that.name) > -1) {
         return item.name.indexOf(that.name) > -1
       }
     })
   }
 },
 // 重置
 reset() {
   this.cameraConfigList = this.list
   this.name= ''
 }
}
}
</script>