目录

一、el-table内容较多时隐藏，hover时换行显示

二、总结

一、el-table内容较多时隐藏，hover时换行显示

1.在需要隐藏的列el-table-column中加上属性   :show-overflow-tooltip=”true”

  实现内容较多时隐藏,hover时显示。

 也换行了，但是换的太丑了@——@

<el-table-column
          prop="replacereason"
          label="更改原因"
          :show-overflow-tooltip="true"
        ></el-table-column>

2.在<style></style>标签中添加样式

  实现hover时多余的内容换行显示，自定义换行的宽度

 注：必须写在全局样式中——和下面一样就可以（不能在style后面加上scoped,否则样式不生效）

  <style>
    .el-tooltip__popper{
    max-width:10%
    }
  </style>

3.这个下拉框还是很丑，修改提示框样式。

  在el-table中添加属性  :tooltip-effect=” ‘xxx'” 

  xxx给提示框添加了一个类名 is-xxx ，下面设置了tooltip-effect=” ‘tooltipStyle’ “，并添加了

is-tooltipStyle这个类设置提示框样式

 <el-table
        :data="tableData"
        :max-height="'753'"
        :tooltip-effect="'tooltipStyle'"
      >
        <el-table-column
          prop="replacereason"
          label="更改原因"
          :show-overflow-tooltip="true"
        ></el-table-column>
</el-table>

.is-tooltipStyle {
  background: #fff;
  color: #3759af;
  border: 1px solid rgb(158, 157, 157);
  font-size: 15px;
}

最终效果：

注：那个小箭头的样式不知道怎么改，如有朋友知道，欢迎评论，非常感谢 ！

二、总结

1.对于样式，可以先尝试在浏览器中找到看看是否可以修改。

2.接口传参不会的时候，可以看看别人是怎么传的。

3.不要一来就百度，百度出的结果很可能不是你想要的。