Vue ElementUI el-table 单元格不换行，使用省略号

API 

el-table 设置属性 cell-class-name，自定义 className

代码 

<template>
    <el-table 
        :data="tableData"
        style="width: 100%"
        cell-class-name="table_cell">
        <el-table-column prop="date" label="日期" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>
<style >
.table_cell .cell{
	white-space: nowrap;
}
</style>

 知识点

1.代码第 5 行，设置属性 cell-class-name；

2.代码第 37 行，注意这里不是 scoped，是全局class。可自行设置前缀；

3.代码第 38 - 40 行，注意这里是两级，第二级 .cell 单元格;

效果

修改前

修改后