2021-05-31-element中table表hover显示隐藏表单的实现

最新推荐文章于 2024-08-21 16:29:58 发布

原创最新推荐文章于 2024-08-21 16:29:58 发布 · 1.3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui

vue 同时被 2 个专栏收录

1 篇文章

订阅专栏

element

1 篇文章

订阅专栏

本文介绍了如何使用Element UI在表格中，通过鼠标悬停事件控制列中显示或隐藏修改按钮。当内容长度超过16字节时，按钮位置调整并提供相应的修改功能。实现过程中涉及事件处理、内容长度判断及CSS定位技巧。

element中table表hover显示隐藏表单的实现

需求：实现鼠标悬停table中的某一列显示修改按钮，修改按钮跟随内容后间距8px，内容超过16字节显示...加上修改按钮，效果如下图

需求：实现鼠标悬停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>

  // 对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;
}