chongya_123 2021-10-19 09:20 采纳率: 53.3%
浏览 128
已结题

vue中使用el-select和el-date-picker来搜索列表数据?

在后台管理中,怎么用下拉列表和日期范围来搜索表格里的数据呢?

  • 写回答

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>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月19日
  • 已采纳回答 10月19日
  • 创建了问题 10月19日

悬赏问题

  • ¥15 h3.6m 人类行为预测论文复现
  • ¥50 wordpress项目注册报失败刷新后其实是成功状态,请求排查原因
  • ¥20 linxu服务器僵尸进程不释放,代码如何修改?
  • ¥15 pycharm激活不成功
  • ¥40 如果update 一个列名为参数的value
  • ¥15 基于51单片机的水位检测系统设计中LCD1602一直不显示
  • ¥15 OCS2安装出现问题,请大家给点意见
  • ¥15 ros小车启动launch文件报错
  • ¥15 vs2015到期想登陆但是登陆不上
  • ¥15 IPQ5018制作烧录固件,boot运行失败(操作系统-linux)(相关搜索:操作系统)(相关搜索:操作系统)