element-ui 中 table表格内容显示滚动条 （一）

1.效果图：

2. 固定element-ui中table的表头，纵向内容过多时，可选择固定表头。

3. 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
   
   必须要在el-table 元素里面设置 height=“250” （高度可自行调整），这样整个表格的表头可以固定，实现右侧内容滚动 。
   如果设置整个.table-container容器的height: 250px， 这样右侧的滚动将不会显示。

代码如下：

<template>
  <el-table
    :data="tableData"
    height="250"  
    border
    class="table-container">
  
    <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-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }]
      }
    }
  }
</script>


<style>
.table-container{/* 表格整体 */
   width:1350px;
   // height: 250px; 
   margin-left:130px;
   margin-top:50px;
}

</style>