下拉框进行查询列表信息（静态界面）

这是自己做的一个小练习

要求：根据select下拉框的搜索条件对已有的静态界面下的列表进行查询筛选。

我的大概思路是：新建一个列表数组，然后循环旧的列表数组，然后做判断，最后更新列表数据。

代码：

<template>

<div>

<div class="topBody">

<Form>

<Row>

<Col span="5">

<FormItem label="线路：" class="mleft">

<Select v-model="name" style="width:230px;margin-bottom:20px;">

<Option value="乐山1路">乐山1路</Option>

<Option value="乐山5路">乐山5路</Option>

<Option value="乐山302路">乐山302路</Option>

<Option value="7路">7路</Option>

<Option value="乐山309路">乐山309路</Option>

</Select>

</FormItem>

</Col>

<Col span="5">

<FormItem>

<Button type="primary" @click="search">查询</Button>

</FormItem>

</Col>

</Row>

</Form>

</div>

<div class="tableText">

<Table :columns="columns" :data="newList" border></Table>

</div>

</div>

</template>

 

我用的是iview组件，因为绑定的是name，做判断的时候是根据value来做判断的，我就设置value和他的label是一样的，value设置其他的话，要做判断，转译什么的吧。我觉得处理起来可能会比较麻烦，就没有那样做。因为是纯的HTML界面数据而已。

js：

<script>

export default {

data() {

return {

name: '',

newList: [],

columns: [

{ key: 'id1', title: '编号', align: 'center', width: 60 },

{ key: 'id2', title: '线路名称', align: 'center' },

{ key: 'id3', title: '方向', align: 'center' },

{ key: 'id4', title: '日期', align: 'center' },

{ key: 'id5', title: '首班车', align: 'center' },

{ key: 'id6', title: '首班车时间', align: 'center' },

{ key: 'id7', title: '末班车', align: 'center' },

{ key: 'id8', title: '末班车时间', align: 'center' }

],

list: [

{

id1: '1',

id2: '7路',

id3: '肖坝旅游车站->漩水沱',

id4: '2018-11-23',

id5: '川L00001',

id6: '06:00',

id7: '川L00005',

id8: '22:00'

},

{

id1: '2',

id2: '乐山5路',

id3: '关庙乡->乐山七中',

id4: '2018-11-23',

id5: '川L00002',

id6: '06:00',

id7: '川L00004',

id8: '22:00'

},

{

id1: '3',

id2: '乐山1路',

id3: '沫若广场->王河园',

id4: '2018-11-23',

id5: '川L00003',

id6: '06:00',

id7: '川L00003',

id8: '22:00'

},

{

id1: '4',

id2: '乐山302路',

id3: '嘉华水泥厂->五通桥公交公司',

id4: '2018-11-23',

id5: '川L00004',

id6: '06:00',

id7: '川L00002',

id8: '22:00'

},

{

id1: '5',

id2: '乐山309路',

id3: '滟澜洲->凤凰学校',

id4: '2018-11-23',

id5: '川L00005',

id6: '06:00',

id7: '川L00001',

id8: '22:00'

}

]

}

},

mounted() {

this.newList = this.list

},

methods: {

search() {

var len = this.list

var arr = []

for (var i in len) {

if (len[i].id2 == this.name) {

arr.push(len[i])

} else if (this.name == '') {

this.newList = this.list

return

}

}

this.newList = arr

}

}

}

</script>

判断后，如果列表里面有符合select选中的value值，则push新数组，如果下拉框为空，则返回旧的列表数据