【Vue】Vue实现Hover功能(mouseover与mouseenter的区别及说明)--20221229

Vue实现Hover功能(mouseover与mouseenter的区别及说明)

i see the future

4365人浏览 · 2022-12-30 16:10:10

i see the future · 2022-12-30 16:10:10 发布

原文说明

https://www.jb51.net/article/264614.htm
在这里插入图片描述

<template>
  <div
    class="hover-view"
    @mouseover="mouseover"
    @mouseenter="mouseenter"
    @mousemove="mousemove"
    @mouseout="mouseout"
    @mouseleave="mouseleave"
    @mousedown="mousedown"
    @mouseup="mouseup"
  >
  </div>
</template>

<script>
export default {
  methods: {
    // 1、进入元素
    mouseover () {
      console.log('mouseover')
    },
    // 2、进入元素
    mouseenter () {
      console.log('mouseenter')
    },
    // 3、移动
    mousemove () {
      console.log('mousemove')
    },
    // 4、离开元素
    mouseout () {
      console.log('mouseout')
    },
    // 5、离开元素
    mouseleave () {
      console.log('mouseleave')
    },
    // 6、鼠标在元素上 按下
    mousedown () {
      console.log('mousedown')
    },
    // 7、鼠标在元素上 抬起
    mouseup () {
      console.log('mouseup')
    }
  }
}
</script>

<style>
.hover-view {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

我的代码-关键部分

可以实现鼠标放在上面就弹出细节信息，关键在于使用了2个hover。

//template
<!-- <a slot="reference" @mouseover="mouseover(props.row.classroomschedule_0900_0929_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_0900_0929_YN  | deleteN}}</a> -->
<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_0900_0929_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_0900_0929_YN  | deleteN}}</a>



// methods

			AjaxOdetail(bid,date){
						this.ScheduleList2 = []
						axios.get(`http://localhost:8080/tc1/bookingDef/${date}/`).then(
						response => {
							console.log('AjaxOdetail请求成功了',response.data)
							// 判断状态后放入数组中
							response.data.forEach(element => {
								console.log('element',element)
								// 增加教室名称判断
								if(element.booking_id == bid){
								this.ScheduleList2.push(element)
								}
							});
							console.log('this.ScheduleList2',this.ScheduleList2)
						},
						error => {
							console.log('AjaxOdetail请求失败了',error.message)
							// this.$bus.$emit('getUsers',false,false,error.message,[])
						}
					)
				},
			mouseover(row,content){
				console.log('@@@@@@@@@','mouseover')
			},

在这里插入图片描述

我的代码-全

MyClassroomQueryResult.vue

<template>
    <div class="">
        <div class="row py-2 pl-3 ml-3 align-items-center">
            
            <!--展示显示人员-->
            <h2 class="ml-3">教室空闲时间查询</h2><span>(Y为已预订)</span>
            <span class="ml-5 pl-5"><router-link type="button" class="btn" style="color:White;background-color:#909399" target="_blank" to="/bookingApply" >教室预定申请</router-link></span>
            <div class="ml-3 table-responsive"  style="background-color: #fff;">
              
				<!-- 第二个表格 -->
				<el-table :header-cell-style="{
					background:'#909399',color:'White',border: '1px solid '}" 
					style="width: 100%;font-size:10px;" class="table-bordered " :data="ScheduleList" stripe
					:default-sort = "{prop: 'classroomschedule_date'}">
					<!-- 表格内容 -->
					<el-table-column prop="classroomschedule_classroom_name" label="教室" fixed sortable width="120"></el-table-column>
					<el-table-column prop="classroomschedule_date" label="日期" fixed sortable width="53" :formatter="formatter_date"></el-table-column>
					<el-table-column prop="classroomschedule_classroom_name" label="时数" sortable width="53" :formatter="CountY"></el-table-column>

					<!-- 利用ajax和弹窗实现booking数据分享 -->
					<el-table-column prop="classroomschedule_0800_0829_YN" label="08:00" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_0800_0829_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_0800_0829_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_0830_0859_YN" label="08:30" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_0830_0859_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_0830_0859_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_0900_0929_YN" label="09:00" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_0900_0929_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_0900_0929_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_0930_0959_YN" label="09:30" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_0930_0959_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_0930_0959_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1000_1029_YN" label="10:00" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1000_1029_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1000_1029_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1030_1059_YN" label="10:30" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1030_1059_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1030_1059_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1100_1129_YN" label="11:00" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1100_1129_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1100_1129_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>


					<el-table-column prop="classroomschedule_1130_1159_YN" label="11:30" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1130_1159_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1130_1159_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>


					<el-table-column prop="classroomschedule_1200_1229_YN" label="12:00" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1200_1229_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1200_1229_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1230_1259_YN" label="12:30" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1230_1259_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1230_1259_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1300_1329_YN" label="13:00" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1300_1329_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1300_1329_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1330_1359_YN" label="13:30" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1330_1359_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1330_1359_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1400_1429_YN" label="14:00" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1400_1429_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1400_1429_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1430_1459_YN" label="14:30" sortable width="53" >
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1430_1459_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1430_1459_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1500_1529_YN" label="15:00" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1500_1529_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1500_1529_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1530_1559_YN" label="15:30" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1530_1559_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1530_1559_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1600_1629_YN" label="16:00" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1600_1629_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1600_1629_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1630_1659_YN" label="16:30" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1630_1659_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1630_1659_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1700_1729_YN" label="17:00" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1700_1729_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1700_1729_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1730_1759_YN" label="17:30" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1730_1759_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1730_1759_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1800_1829_YN" label="18:00" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1800_1829_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1800_1829_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1830_1859_YN" label="18:30" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1830_1859_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1830_1859_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1900_1929_YN" label="19:00" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1900_1929_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1900_1929_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

					<el-table-column prop="classroomschedule_1930_1959_YN" label="19:30" sortable width="53">
						<template slot-scope="props">
							<el-popover
								placement="right"
								width="800"
								trigger="hover">
								<el-table :data="ScheduleList2">
									<el-table-column width="100" property="booking_date" label="日期"></el-table-column>
									<el-table-column width="100" property="booking_start_time" label="开始时间"></el-table-column>
									<el-table-column width="100" property="booking_end_time" label="结束时间"></el-table-column>
									<el-table-column width="80" property="booking_employee_name" label="姓名"></el-table-column>
									<el-table-column width="120" property="booking_employee_phone" label="电话"></el-table-column>
									<el-table-column width="100" property="booking_classroom_name" label="教室"></el-table-column>
									<el-table-column width="100" property="booking_content" label="内容"></el-table-column>
								</el-table>
								<a slot="reference" @mouseover="AjaxOdetail(props.row.classroomschedule_1930_1959_content,props.row.classroomschedule_date)">{{props.row.classroomschedule_1930_1959_YN  | deleteN}}</a>
							</el-popover>
						</template>
					</el-table-column>

				</el-table>
  
            </div>
        </div>
    </div>
</template>
  


<script>
	import axios from 'axios'

	export default {
		name:'MyClassroomQueryResult',
		
		data(){
			return{
				classroom_options:['TC-01.孟子教室','TC-02.庄子教室','TC-03.墨子教室','TC-04.旬子教室',
									'TC-05.国际语言教室','TC-06.会议室','TC-07.企业文化展厅',],
				ScheduleList:[],
				ScheduleList2:[],
				keyWord:[this.classroomschedule_date_start,this.classroomschedule_date_end],
			}
		},
		props:['checkedClassroom','classroomschedule_date_start','classroomschedule_date_end',],
		methods: {
			searchSchedules(k,e){
					this.ScheduleList = []
					k.forEach(
						k1 => {
							axios.get(`http://localhost:8080/tc1/classroomscheduleDef/${k1}/`).then(
							response => {
								console.log('请求成功了',response.data)
								// 判断状态后放入数组中
								response.data.forEach(element => {
									// 增加教室名称判断
									if(this.checkedClassroom.indexOf(element.classroomschedule_classroom_name)>-1){
									this.ScheduleList.push(element)
									}
								});
								// DOM更新后执行(不建议直接操作DOM)添加背景颜色
								// this.$nextTick(
								// 	function(){
								// 		let i= 0
								// 		let paradom1 = document.getElementsByClassName("p1")
								// 		for (i = 0 ; i < paradom1.length; i++) {
								// 			var para = document.getElementsByClassName("p1")[i];
								// 			if (para.textContent =='N') {
								// 				para.style.backgroundColor = "white";
								// 			}else if (para.textContent =='Y') {
								// 				para.style.backgroundColor = "grey";
								// 			}else{para.style.color = "black";}
								// 		}
								// 	}
								// )
							},
							error => {
								console.log('请求失败了',error.message)
								// this.$bus.$emit('getUsers',false,false,error.message,[])
							}
						)
						}
					)
			},
			AjaxOdetail(bid,date){
						this.ScheduleList2 = []
						axios.get(`http://localhost:8080/tc1/bookingDef/${date}/`).then(
						response => {
							console.log('AjaxOdetail请求成功了',response.data)
							// 判断状态后放入数组中
							response.data.forEach(element => {
								console.log('element',element)
								// 增加教室名称判断
								if(element.booking_id == bid){
								this.ScheduleList2.push(element)
								}
							});
							console.log('this.ScheduleList2',this.ScheduleList2)
						},
						error => {
							console.log('AjaxOdetail请求失败了',error.message)
							// this.$bus.$emit('getUsers',false,false,error.message,[])
						}
					)
				},
			formatter_date(row, column,cellValue, index) {
					return cellValue.split('-')[1] + '-' + cellValue.split('-')[2]
				},
			CountY(row, column,cellValue, index) {
					let i = 0
					if(row.classroomschedule_0800_0829_YN == 'Y') i += 0.5
					if(row.classroomschedule_0830_0859_YN == 'Y') i += 0.5
					if(row.classroomschedule_0900_0929_YN == 'Y') i += 0.5
					if(row.classroomschedule_0930_0959_YN == 'Y') i += 0.5
					if(row.classroomschedule_1000_1029_YN == 'Y') i += 0.5
					if(row.classroomschedule_1030_1059_YN == 'Y') i += 0.5
					if(row.classroomschedule_1100_1129_YN == 'Y') i += 0.5
					if(row.classroomschedule_1130_1159_YN == 'Y') i += 0.5
					if(row.classroomschedule_1200_1229_YN == 'Y') i += 0.5
					if(row.classroomschedule_1230_1259_YN == 'Y') i += 0.5
					if(row.classroomschedule_1300_1329_YN == 'Y') i += 0.5
					if(row.classroomschedule_1330_1359_YN == 'Y') i += 0.5
					if(row.classroomschedule_1400_1429_YN == 'Y') i += 0.5
					if(row.classroomschedule_1430_1459_YN == 'Y') i += 0.5
					if(row.classroomschedule_1500_1529_YN == 'Y') i += 0.5
					if(row.classroomschedule_1530_1559_YN == 'Y') i += 0.5
					if(row.classroomschedule_1600_1629_YN == 'Y') i += 0.5
					if(row.classroomschedule_1630_1659_YN == 'Y') i += 0.5
					if(row.classroomschedule_1700_1729_YN == 'Y') i += 0.5
					if(row.classroomschedule_1730_1759_YN == 'Y') i += 0.5
					if(row.classroomschedule_1800_1829_YN == 'Y') i += 0.5
					if(row.classroomschedule_1830_1859_YN == 'Y') i += 0.5
					if(row.classroomschedule_1900_1929_YN == 'Y') i += 0.5
					if(row.classroomschedule_1930_1959_YN == 'Y') i += 0.5
					return i
				},
			GOTOdetail(row,content){
				console.log('@@@@@@@@@','GOTOdetail')
				this.$router.push({
				name:'bookingDetail',
				query:{
					bid:content,
					classroomschedule_date:row.classroomschedule_date,
				}
				})
			},
			mouseover(row,content){
				console.log('@@@@@@@@@','mouseover')
			},

		},
		mounted(){
			this.searchSchedules(this.keyWord)
		},
		filters: {
			deleteN: function (value) {
				if (value === 'Y') return 'Y'
			}
			}

	}
</script>

<style>
</style>

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport