SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
  el: '#app',
  data: function() {
    return {
      tableColumn: [{
        data: 'name',
        label: '姓名',
        width: '150px'
      },
      {
        data: 'date',
        label: '身份证号 ',
        'min-width': '300px'
      },
      {
        data: 'address',
        label: '次数',
        width: '80px'
      }],
      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 弄'
      }]
    }
  }
})
<div id="app">
  <div class="flex">
    <div class="right">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column :prop="item.data" :label="item.label" :width="item.width"
        v-for="(item,index) in tableColumn" :key="index">
        </el-table-column>
      </el-table>
    </div>
  </div>
</div>
.el-table {
  min-height: 252px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

table {
  border-collapse: collapse
}

.flex {
  display: flex;
}

.left {
  width: 600px;
  margin-left: 10px;
  margin-right: 10px;
}

.right {
  flex: 1;
  margin-left: 10px;
  margin-right: 10px;
}

.el-table .cell {
  white-space: nowrap;
}

.el-table td,
.el-table th {
  padding: 9px 0;
}

.el-select,
.el-date-editor.el-input,
.el-date-editor.el-range-editor {
  width: 100%;
}

.el-tag .el-icon-close {
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}

本项目引用的自定义外部资源