在后台管理中,怎么用下拉列表和日期范围来搜索表格里的数据呢?
哈喽,给el-select和el-date-picker绑定值,然后在搜索按钮点击时以该值进行请求即可,以下为示例代码:
<template>
<div>
<el-select v-model="selectValue" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-date-picker
v-model="daterange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd HH:mm:ss"
>
</el-date-picker>
<el-button @click="search">搜索</el-button>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
options: [
{
value: '选项1',
label: '黄金糕',
},
{
value: '选项2',
label: '双皮奶',
},
{
value: '选项3',
label: '蚵仔煎',
},
{
value: '选项4',
label: '龙须面',
},
{
value: '选项5',
label: '北京烤鸭',
},
],
selectValue: '',
daterange: [],
}
},
methods: {
search () {
// 请求
console.log(this.selectValue, this.daterange)
},
},
}
</script>
下拉肯定是以一个字段来搜索,日期 选择器 肯定是一个时间 ,可以是一个时间段内 。可以是 起始时间或者结束时间
只要获取到选中的值,以对应字段传到 接口 里就行