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;
}