Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

基础表格

基础的表格展示用法。

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

 1 <template>
 2     <el-table
 3       :data="tableData"
 4       style="width: 100%">
 5       <el-table-column
 6         prop="date"
 7         label="日期"
 8         width="180">
 9       </el-table-column>
10       <el-table-column
11         prop="name"
12         label="姓名"
13         width="180">
14       </el-table-column>
15       <el-table-column
16         prop="address"
17         label="地址">
18       </el-table-column>
19     </el-table>
20   </template>
21 
22   <script>
23     export default {
24       data() {
25         return {
26           tableData: [{
27             date: '2016-05-02',
28             name: '王小虎',
29             address: '上海市普陀区金沙江路 1518 弄'
30           }, {
31             date: '2016-05-04',
32             name: '王小虎',
33             address: '上海市普陀区金沙江路 1517 弄'
34           }, {
35             date: '2016-05-01',
36             name: '王小虎',
37             address: '上海市普陀区金沙江路 1519 弄'
38           }, {
39             date: '2016-05-03',
40             name: '王小虎',
41             address: '上海市普陀区金沙江路 1516 弄'
42           }]
43         }
44       }
45     }
46   </script>

View Code