element鼠标经过单元格的时候显示按钮并可点击

两个月菜鸟

于 2024-08-23 16:28:47 发布

阅读量193

点赞数 1

文章标签：计算机外设 vue.js 前端

本文链接：https://blog.csdn.net/qq_45314219/article/details/141468922

版权

element

1.使用el-table 的@cell-mouse-enter和@cell-mouse-leave方法

<el-table @cell-mouse-enter="focusAblur" @cell-mouse-leave="focusOut" class="table_box"
                :header-cell-style="{ background: '#F5F7FA', color: '#000' }"
                :data="fixedSetting.timeSettingAndCourseDto" border style="width: 100%">
                <el-table-column prop="settingName" fixed="left" label="节次/星期" width="150">
                </el-table-column>
                
            </el-table>

2.当鼠标指针进入时触发方法拿到参数，其中可以拿到顶部行列的数据，这样可以定位到触发的是哪一个单元格，在数据上用isShow来显示是否显示按钮

 // 当鼠标指针进入被选元素时，会发生 mouseenter 事件
    focusAblur(row: any, column: any, cell: any, event: any) {
        let cIndex = this.getAllDate.dayOfWeekCourse.findIndex((x) => x.dayOfWeekStr == column.label)
        if (cIndex > -1) {
            row.courseDayOfWeek[cIndex].isShow = true
        }
    }
    // 当鼠标指针离开被选元素时，会发生 mouseleave 事件
    focusOut(row: any, column: any, cell: any, event: any) {
        let cIndex = this.getAllDate.dayOfWeekCourse.findIndex((x) => x.dayOfWeekStr == column.label)
        if (cIndex > -1) {
            row.courseDayOfWeek[cIndex].isShow = false
        }
    }