表格中的内容过长时不换行，以tips方式展示

项目使用vue+element-ui

tooltip-effect="light" <el-table>需要设置这个属性, 然后在需要使用的<el-table-column>中使用 show-overflow-tooltip="true" 既能实现效果

<!--表格数据及操作-->
    <el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="light">
      <!--勾选框-->
      <el-table-column type="selection" width="55">
      </el-table-column>
      <!--索引-->
      <el-table-column type="index" :index="indexMethod">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180" sortable>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="编辑" width="100">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
        </template>
      </el-table-column>
      <el-table-column label="删除" width="100">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

显示效果

 

有两点需要注意：

①el-table标签中需要添加tooltip-effect="dark"属性

②el-table-column标签中需要添加show-overflow-tooltip属性

默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。