vue3时间选择器筛选数据

Question

选择器筛选条件，页面无法展示所选内容

<div class="search">
    <div class="select">
      <span class="demonstration">选择省份：</span>
      <el-select
        v-model="selectProv"
        clearable
        placeholder="选择查询的省份"
        style="width: 240px"
        @change="provChange"
      >
        <el-option
          v-for="item in prov"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <span class="demonstration">选择月份：</span>
      <el-date-picker
        v-model="selectMonth"
        type="months"
        placeholder="选择月份"
        @change="monthChange"
      />

      <button class="btn1" @change="handleQuery">查询</button>
      <button class="btn1" @change="handleReset">重置</button>
    </div>
  </div>

const selectProv = ref<string | null>(null);
const prov = computed(() => {
  const options = new Set(tableData.value.map((item) => item.prov_nm));
  return Array.from(options).map((option) => ({
    label: option,
    value: option,
  }));
});
const selectMonth = ref<any | null>(null);
const months = computed(() => {
  const options = new Set(tableData.value.map((item) => item.month));
  return Array.from(options).map((option) => ({
    label: option,
    value: option,
  }));
});
const data = computed(() => {
  if (!selectMonth.value) {
    return tableData.value;
  }
 return tableData.value.filter((item) => item.month === selectProv.value);
});
const monthChange = (value: any) => {
  selectMonth.value = value;
};

const data = computed(() => {
  if (!selectProv.value) {
    return tableData.value;
  }
  return tableData.value.filter((item) => item.prov_nm === selectProv.value);
});

const provChange = () => {
 
  currentPage.value = 1;
};

const handleQuery = () => {
  // 当点击查询按钮时，重置分页到第一页
  currentPage.value = 1;
  // 确保DOM更新完成
  nextTick(() => {
    console.log("查询完成，当前页数据：", currentPageData.value);
  });
};

const handleReset = () => {
  // 当点击重置按钮时，清除选择器的值并重置分页到第一页
  selectProv.value = null;
  currentPage.value = 1;
  // 确保DOM更新完成
  nextTick(() => {
    console.log("重置完成，当前页数据：", currentPageData.value);
  });
};
const handlePageChange = (newPage: number) => {
  currentPage.value = newPage;
};

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

Vue3时间选择器筛选数据

你遇到了一个问题，在使用 ElementUI 的时间选择器时，筛选条件无法展示所选内容。

可能的原因是你使用的时间选择器是 el-date-picker，它是一个单独的组件，而不是一个筛选器。因此，你需要在选择器的 value 属性中处理筛选条件。

你可以尝试使用 v-model 将选择器的值绑定到一个数据对象中，然后在模板中使用该数据对象来展示所选内容。

例如：

<template>
  <div class="search">
    <div class="select">
      <span class="d">
        {{ selectedDate }}
      </span>
      <el-date-picker
        v-model="dateValue"
        type="date"
        placeholder="选择日期"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateValue: '',
      selectedDate: ''
    }
  },
  watch: {
    dateValue(val) {
      this.selectedDate = val ? val.toLocaleDateString() : ''
    }
  }
}
</script>

在上面的代码中，我们使用 v-model 将选择器的值绑定到 dateValue 数据对象中，然后使用 watch 侦听器来更新 selectedDate 数据对象的值。

这样，当你选择日期时，selectedDate 数据对象将被更新，展示所选内容。

如果你需要更多帮助，请提供更多的代码和详细信息。