修改下面代码添加一个根据上班打卡时间区间进行查询 点击查询按钮可进行姓名和时间区间的联合查询 <el-select v-model="filterUser" ><el-option v-for="(item, index) in uniqueUser" :key="index" :label="item.label" :value="item.value" ></el-option> </el-select> <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" ></el-date-picker> <el-button type="primary" @click="selectUser">查询</el-button>methods: { //获取人员打卡信息 async getAttendanceData() { const { data: res } = await request.get("/User/UserClockIn", { params: { user_name: this.filterUser }, }); if (res.status !== 200) return this.$msg.error(res.msg); this.attendanceData = res.data; this.user_option = this.attendanceData.map((item) => { return { value: item.user_name, label: item.user_name, }; }); }, //根据姓名筛选 selectUser() { if (this.filterUser.length > 0) { this.filteredList = this.attendanceData.filter( (item) => this.filterUser.indexOf(item.user_name) !== -1 ); } else { this.filteredList = this.attendanceData; } }, }, computed: { //监视：当没有从下拉框选择成员信息时 显示全部信息 filteredList: { get() { if (this.filterUser.length > 0) { return this.attendanceData.filter( (item) => this.filterUser.indexOf(item.user_name) !== -1 ); } else { return this.attendanceData; } }, set(value) {}, },

你可以将以下代码添加到 methods 中：

selectUser() {
  if (this.filterUser.length > 0 && this.value2 !== null) {
    this.filteredList = this.attendanceData.filter((item) => {
      return this.filterUser.indexOf(item.user_name) !== -1 && 
        moment(item.clock_in_time).isBetween(this.value2[0], this.value2[1])
    });
  } else if (this.filterUser.length > 0) {
    this.filteredList = this.attendanceData.filter(
      (item) => this.filterUser.indexOf(item.user_name) !== -1
    );
  } else if (this.value2 !== null) {
    this.filteredList = this.attendanceData.filter((item) => {
      return moment(item.clock_in_time).isBetween(this.value2[0], this.value2[1])
    });
  } else {
    this.filteredList = this.attendanceData;
  }
},

这里使用了 moment.js 库来处理时间，需要先在代码中引入 moment.js 库。在这段代码中，我们首先判断用户是否同时选择了人员和时间区间，如果是，则筛选出符合条件的数据；如果只选择了人员或时间区间中的一个，则只使用该条件进行筛选；如果两个条件都没有选择，则显示全部信息。