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

Question

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

Answer 1

哈喽，给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>