java+vue+mybatis，三个下拉列表，分别是时间段、课程名字、场地，日期是一个日历，可以选择。课程名字存在课程表里，场地存在场地表里，时间段、日期、课程名字、场地存在课表里，实现在选定时间段、日期时只显示未被选择的课程和场地。用代码实现

这个需求可以通过前端框架Vue和后端框架Spring Boot来实现，具体实现步骤如下：

1. 前端页面设计

在前端页面，我们需要一个日历组件，三个下拉列表以及一个“查询”按钮。其中，日历组件可以使用element-ui中的DatePicker组件，下拉列表可以使用element-ui中的Select组件，代码如下：

<template>
  <div>
    <el-date-picker v-model="date" type="date"></el-date-picker>
    <el-select v-model="course" placeholder="请选择课程">
      <el-option v-for="item in courseList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
    <el-select v-model="place" placeholder="请选择场地">
      <el-option v-for="item in placeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
    <el-button @click="handleSearch">查询</el-button>
  </div>
</template>

2. 后端接口设计

在后端，我们需要设计一个查询接口，用于返回符合条件的课程和场地列表。接口可以使用Spring Boot中的@RestController注解来实现，代码如下：

@RestController
public class CourseController {
  @Autowired
  private CourseService courseService;

  @GetMapping("/courses")
  public List<Course> getCourses(@RequestParam Date date, @RequestParam int courseId, @RequestParam int placeId) {
    return courseService.getCourses(date, courseId, placeId);
  }
}

其中，@RequestParam注解用于接收前端传递过来的参数，getCourses方法用于查询符合条件的课程和场地列表。

3. 后端数据查询

在后端，我们需要通过MyBatis来实现数据查询。首先，在mapper中定义一个查询方法：

<select id="getCourses" parameterType="map" resultType="com.example.Course">
  select * from course where course_date = #{date} and course_id = #{courseId} and place_id = #{placeId}
</select>

然后，在service中调用mapper中的方法来进行数据查询：

@Service
public class CourseService {
  @Autowired
  private CourseMapper courseMapper;

  public List<Course> getCourses(Date date, int courseId, int placeId) {
    Map<String, Object> params = new HashMap<>();
    params.put("date", date);
    params.put("courseId", courseId);
    params.put("placeId", placeId);
    return courseMapper.getCourses(params);
  }
}

4. 前后端交互

最后，在前端页面中，我们需要调用后端接口来获取数据，并将数据展示在页面上。可以使用axios来实现前后端交互，代码如下：

<script>
import axios from 'axios'

export default {
  data() {
    return {
      date: new Date(),
      course: '',
      place: '',
      courseList: [],
      placeList: [],
      courseOptions: [],
      placeOptions: []
    }
  },
  methods: {
    handleSearch() {
      axios.get('/courses', {
        params: {
          date: this.date,
          courseId: this.course,
          placeId: this.place
        }
      }).then(res => {
        this.courseOptions = res.data.courses;
        this.placeOptions = res.data.places;
      }).catch(err => {
        console.log(err);
      })
    }
  },
  mounted() {
    axios.get('/courseList').then(res => {
      this.courseList = res.data;
    }).catch(err => {
      console.log(err);
    })

    axios.get('/placeList').then(res => {
      this.placeList = res.data;
    }).catch(err => {
      console.log(err);
    })
  }
}
</script>

其中，handleSearch方法用于调用后端接口，获取符合条件的课程和场地列表，并将列表展示在页面上。mounted方法用于在页面加载时，初始化下拉列表的选项。