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

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>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • 崽崽的谷雨 2021-10-19 09:24
    关注

    下拉肯定是以一个字段来搜索,日期 选择器 肯定是一个时间 ,可以是一个时间段内 。可以是 起始时间或者结束时间

    只要获取到选中的值,以对应字段传到 接口 里就行

    评论
查看更多回答(1条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥60 PCDN如何使用宽带的电视业务通道拨号叠加带宽?
  • ¥15 遇到这种校园宽带网络应该怎么样解决?
  • ¥30 AXI VIP验证多余打印问题
  • ¥15 利用加权最小二乘法求某品牌手机价格指标,已按照总销量计算出权重,各类型号手机价格已知,如何求得价格指标?
  • ¥15 如何自制一个硬件钱包,有兴趣的朋友一起交流
  • ¥15 (关键词-聊天软件)
  • ¥15 求大家看看这个编程的编法没有思路啊
  • ¥20 WSL打开图形化程序子窗口无法点击
  • ¥15 Jupyter Notebook 数学公式不渲染
  • ¥20 ERR_CACHE_MISS 确认重新提交表单