table标签+tooltip+js，做溢出隐藏，鼠标经过提示全部内容（封装模块）

首先说的是，本项目是vue项目，开发使用的是大屏显示器，而在小屏笔记本中，表格中的字段会出现换行的，需要调整；
我之前是做过不同屏幕大小的适配的，整体来说还是可以的，但是在小屏的时候，还是要做特殊处理的，本文就是将，一个table表格里展示员工的信息时，文字的长度如果超出了单元格的宽度，就提出隐藏，显示省略号，鼠标经过显示tooltip提示框全部内容

1、设置整个table表格中单元格的溢出隐藏

 table {
          width: 100%;
          border-collapse: collapse;
          table-layout: fixed;
          .FirstReportUserName{
            color: #1f7be3;
          }
          .FirstReportUserName:hover{
            cursor: pointer;
          }
          tr {
            width: 100%;
            height: 46px;
            th {
              width: 22.5%;
              // min-width: 150px;
              // max-width: 150px;
              font-size: 14px;
              color: #333333;
              text-align: left;
              text-indent: 10px;
              font-weight: 400;
              background-color: #f5f6fa;
              opacity: 0.7;
              border: solid 1px #ededed;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              -icab-text-overflow: ellipsis;
              -khtml-text-overflow: ellipsis;
              -moz-text-overflow: ellipsis;
              -webkit-text-overflow: ellipsis;
            }
            td {
              width: 27.5%;
              // min-width: 219px;
              // max-width: 219px;
              text-indent: 10px;
              font-size: 14px;
              color: #666666;
              border: solid 1px #ededed;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              -o-text-overflow: ellipsis;
              -icab-text-overflow: ellipsis;
              -khtml-text-overflow: ellipsis;
              -moz-text-overflow: ellipsis;
              -webkit-text-overflow: ellipsis;
            }
          }
        }

2、注册鼠标的进入和移出事件

这里我们用事件委托的方法，将事件绑定在table的父元素身上（其实绑定在table身上就可以啦），利用了事件捕获，优化了代码量，提升了开发效率

<div class="left" v-on:mouseover="show_school_name_box" v-on:mouseleave="hide_school_name_box">
        <!-- 个人信息 -->
        <div class="top">
          <div class="title">个人信息</div>
          <table>
            <tr>
              <th>性别</th>
              <td v-text="personal_Information.sex"></td>
              <th>出生日期</th>
              <td v-cloak>{{ personal_Information.birthdate | dateFormat }}</td>
            </tr>
            <tr>
              <el-tooltip effect="dark" content="首次参加工作时间" placement="top" :disabled='is_show_box.is_work_time'>
                <th class="is_work_time">首次参加工作时间</th>
              </el-tooltip>
              <td v-cloak>{{ personal_Information.startwork | dateFormat }}</td>
              <th>毕业院校</th>
              <el-tooltip effect="dark" :content="personal_Information.school_graduated" placement="top" :disabled='is_show_box.is_school_name'>
                <td class="is_school_name" v-cloak>
                  {{ personal_Information.school_graduated }}
                </td>
              </el-tooltip>
              
            </tr>
            <tr>
              <th>专业</th>
              <td v-text="personal_Information.speciality"></td>
              <th>最高学历</th>
              <td v-text="personal_Information.degreename"></td>
            </tr>
            <tr>
              <th>紧急联系人</th>
              <td v-text="personal_Information.urgencyman"></td>
              <el-tooltip effect="dark" content="紧急联系人电话" placement="top" :disabled='is_show_box.is_Emergency_Contact_Number'>
                <th class="is_Emergency_Contact_Number">紧急联系人电话</th>
              </el-tooltip>
              <td v-text="personal_Information.urgencyphone"></td>
            </tr>
            <tr>
              <th>文化衫尺码</th>
              <td v-text="personal_Information.tshirtsize"></td>
              <th></th>
              <td></td>
            </tr>
          </table>
        </div>

这样就不同每一个单元格都绑定事件了

3、定义事件处理程序（将事件处理程序封装成js模块）

首先新建一个js文件，命名为show.js
控制tooltip弹框的是否可用，用到了一个“disabled”这个属性，它的默认值为false，那么我们就定义一个变量来控制tooltip弹框的是否可用，如果文本的长度超过了单元格的宽度，那么变量为false，否则为true

还有一个问题就是，每一个变量都要单独的用到一个事件处理程序码？那样是不是太繁琐了，如果所有的变量都能用一个处理函数，就大大的解决的代码量，我想到了一个办法，就是给th加一个类名，这个类名要和你的控制变量保持一致，这样在，事件处理程序中，就可以用事件对象， e.target.className来拿到这个值，然后对它操作
如：

<el-tooltip effect="dark" content="劳动合同开始时间" placement="top" :disabled='is_show_box.is_startdate'>
     <th class="is_startdate">劳动合同开始时间</th>
</el-tooltip>

// 定义控制的变量
export  const is_show_box = {
  // CEO权限下个人页面中“户口所在地详细地址”的提示框显示与隐藏
  is_hukou_adress:true,
  // 控制ceo“户口局部详细信息”提示框的显示与隐藏
  is_detailed_information:true,
  // 控制ceo“私人邮箱”提示框的显示与隐藏
  is_archives_mail:true,
  // 控制ceo“通讯地址”提示框的显示与隐藏
  is_tongxun_address:true,
  // 控制ceo“th 紧急联系地址”提示框的显示与隐藏(标签内容)
  is_jinji_adress:true,
  // 控制ceo"td 紧急联络地址"提示框的显示与隐藏（数据）
  is_urgencyaddress:false,
  // 控制“首次参加工作时间”的提示框显示与隐藏
  is_work_time:true,
  // 控制“毕业院校”提示框的显示与隐藏
  is_school_name: true,
  // 控制“紧急联系人电话”的提示框显示与隐藏
  is_Emergency_Contact_Number:true,
  // 控制“劳动合同开始时间”的提示框显示与隐藏
  is_startdate:true,
  // 控制“劳动合同结束时间”的提示框显示与隐藏
  is_enddate:true
}




// 鼠标移入时的处理函数,完整提示信息显示
export const show_school_name_box = (e) => {
    const i = e.target.className.indexOf(' ')
    const value = e.target.className.slice(i + 1)
    if (e.target.scrollWidth > e.target.offsetWidth) {
      is_show_box[value] = false
    } else {
      is_show_box[value] = true
    }
}

// 鼠标移出时的处理函数，完整提示信息隐藏
export const hide_school_name_box = (e) => {
    const i = e.target.className.indexOf(' ')
    const value = e.target.className.slice(i + 1)
    is_show_box[value] = true
}

4、在组件中使用js模块

首先要导入

/ 导入移入移出tr，th的方法，以及控制tooltip的显示与隐藏的变量
import { show_school_name_box,hide_school_name_box,imgError,is_show_box } from '@/utils/show.js'

然后将控制的变量注册为组件的data数据
将事件处理程序注册为组件的方法

export default {
  data() {
    return {
      // 控制tooltip弹出框的显示与隐藏
      is_show_box,
    }
  },
  methods: {
    // 注册组件的方法
    show_school_name_box,hide_school_name_box,imgError,
}

这样就大大节约了代码量