在后台管理中,怎么用下拉列表和日期范围来搜索表格里的数据呢?
2条回答 默认 最新
- been_ss 2021-10-19 09:31关注
哈喽,给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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 网络科学导论,网络控制
- ¥15 metadata提取的PDF元数据,如何转换为一个Excel
- ¥15 关于arduino编程toCharArray()函数的使用
- ¥100 vc++混合CEF采用CLR方式编译报错
- ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误,如何解决?
- ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
- ¥15 c#逐行读取txt文本,但是每一行里面数据之间空格数量不同
- ¥50 如何openEuler 22.03上安装配置drbd
- ¥20 ING91680C BLE5.3 芯片怎么实现串口收发数据
- ¥15 无线连接树莓派,无法执行update,如何解决?(相关搜索:软件下载)