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 vue2(标签-chrome|关键词-浏览器兼容)
  • ¥15 python网络流自动生成系统 医学领域
  • ¥15 代码的修改,添加和运行完善
  • ¥15 krpano-场景分组和自定义地图分组
  • ¥15 lammps Gpu加速出错
  • ¥15 关于PLUS模型中kapaa值的问题
  • ¥15 关于博途V17进行仿真时无法建立连接问题
  • ¥15 机器学习教材中的例题询问
  • ¥15 求.net core 几款免费的pdf编辑器
  • ¥15 为什么安装HCL 和virtualbox之后没有找到VirtualBoxHost-OnlyNetWork?