element中table表hover显示隐藏表单的实现
需求: 实现鼠标悬停table中的某一列显示修改按钮,修改按钮跟随内容后间距8px,内容超过16字节显示…加上修改按钮,效果如下图
#思路:
1、 需要解决鼠标进入列的和离开列的事件控制修改按钮的显示和隐藏, 问题点=>怎样优雅地处理table表中的事件,不用直接操作dom去控制
2、 判断内容的字节数判断跟随的修改按钮的位置,问题点=>如果修改是放在内容中会占据行内元素的位置和长度,影响最终的位置,所以采取定位脱离文档流解决
html
<el-table
:data="tableData"
fixed
v-loading="loading"
@cell-mouse-enter="mouseEnterTable" // element单元格hover进入触发,参数row, column, cell, event见官网
@cell-mouse-leave="mouseLeaveTable"
class="tableBox"
>
<el-table-column prop="shareName" :label="'备注名称'" width="179">
<template slot-scope="scope">
<div class="nameRow textover">
<span :class="judgeLen(scope.row.shareName) < 16 ? 'rel': ''"
>{{ scope.row.shareName}}
<span
class="commedit"
v-if="scope.row.dis && judgeLen(scope.row.shareName) < 16"
@click="openObserverName(scope.row)"
>
修改</span
>
</span>
<span
v-show="scope.row.dis && judgeLen(scope.row.shareName) >= 16"
class="edit"
@click="openObserverName(scope.row)"
>修改</span
>
</div>
</template>
</el-table-column>
</el-table>
js
// 对tableData数据进行处理每一条增加下面两个属性,行标识和控制显示隐藏的属性
//item.rowIndex = index;
//item.dis = false;
// 进入table,找到定位
mouseEnterTable(row, column) {
// 显示修改
if (column.property === 'shareName') {
this.tableData[row.rowIndex].dis = true;
}
},
// 鼠标离开隐藏修改按钮
mouseLeaveTable(row, column) {
// 隐藏修改
if (column.property === 'shareName') {
this.tableData[row.rowIndex].dis = false;
}
},
// 修改按钮的点击事件
openObserverName(row) {
this.observerRow = { ...row };
this.dialogName = true;
},
// 计算内容的长度
judgeLen(str) {
let strlen = 0;
for (let i = 0; i < str.length; i++) {
if (str.charCodeAt(i) > 255) {
strlen += 2; //如果是汉字,则字符串长度加2
} else {
strlen++;
}
}
return strlen;
},
scss
.nameRow {
position: relative;
padding-right: 25px;
.edit {
position: absolute;
right: 0;
top: 1px;
cursor: pointer;
font-size: 12px;
color: #308af4;
// vertical-align: bottom;
}
.commedit {
position: absolute;
top: 2px;
right: -32px;
font-size: 12px;
line-height: 14px;
color: #308af4;
padding-left: 4px;
cursor: pointer;
}
}
.rel {
position: relative;
}
如有问题请请留言,欢迎交流