直接查询
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>