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 单元格;

效果

修改前

修改后

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐