关于前端在没有后台接口的情况下做搜索功能
以下代码为vue中的实例代码，此时只剩余搜索功能，具体还有根据实际开发调整
<template>
<div style="id="Room">
<van-search v-model="selectVal" placeholder="请输入您要预订的会议室" @input="queryData" />
<van-grid :column-num="2">
<van-grid-item
v-for="(item,index) in meetingRoom_list "
:key="index"
>
<div class="tdiv">
<div style="width: 100%; position: absolute;">
<van-image class="img" :src="item.image_path" />
</div>
</div>
<p class="p1">{{item.room_name}}</p>
<p class="p2">可容纳{{item.galleryful}}人</p>
</van-grid-item>
</van-grid>
</div>
</template>
<script>
import { meetingRoomList } from "../../axios/home";
export default {
name: "meetingRoomList",
data() {
return {
meetingRoom_list: [],
omeetingRoom_list: [],
selectVal: ""
};
},
methods: {
load() {
queryData() {
//没有输入内容的情况下
if (this.selectVal === "" || this.selectVal == null) {
this.meetingRoom_list = this.omeetingRoom_list;
return;
}
//搜索（输入内容的情况下）
let list = this.omeetingRoom_list.filter(
item => item.room_name.toString().indexOf(this.selectVal) >= 0
);
this.meetingRoom_list = list;
},
}
};
