zoukankan      html  css  js  c++  java

  • Table 表格

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

    基础表格

    基础的表格展示用法。

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

     1 <template>
 2     <el-table
 3       :data="tableData"
 4       style=" 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

    带斑马纹表格

    使用带斑马纹的表格，可以更容易区分出不同行的数据。

    stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。

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

    带边框表格

    默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。

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

    带状态表格

    可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。

    可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

     1 <template>
 2   <el-table
 3     :data="tableData2"
 4     style=" 100%"
 5     :row-class-name="tableRowClassName">
 6     <el-table-column
 7       prop="date"
 8       label="日期"
 9       width="180">
10     </el-table-column>
11     <el-table-column
12       prop="name"
13       label="姓名"
14       width="180">
15     </el-table-column>
16     <el-table-column
17       prop="address"
18       label="地址">
19     </el-table-column>
20   </el-table>
21 </template>
22 
23 <style>
24   .el-table .warning-row {
25     background: oldlace;
26   }
27 
28   .el-table .success-row {
29     background: #f0f9eb;
30   }
31 </style>
32 
33 <script>
34   export default {
35     methods: {
36       tableRowClassName({row, rowIndex}) {
37         if (rowIndex === 1) {
38           return 'warning-row';
39         } else if (rowIndex === 3) {
40           return 'success-row';
41         }
42         return '';
43       }
44     },
45     data() {
46       return {
47         tableData2: [{
48           date: '2016-05-02',
49           name: '王小虎',
50           address: '上海市普陀区金沙江路 1518 弄',
51         }, {
52           date: '2016-05-04',
53           name: '王小虎',
54           address: '上海市普陀区金沙江路 1518 弄'
55         }, {
56           date: '2016-05-01',
57           name: '王小虎',
58           address: '上海市普陀区金沙江路 1518 弄',
59         }, {
60           date: '2016-05-03',
61           name: '王小虎',
62           address: '上海市普陀区金沙江路 1518 弄'
63         }]
64       }
65     }
66   }
67 </script>
    View Code

    固定表头

    纵向内容过多时，可选择固定表头。

    只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

     1 <template>
 2   <el-table
 3     :data="tableData3"
 4     height="250"
 5     border
 6     style=" 100%">
 7     <el-table-column
 8       prop="date"
 9       label="日期"
10       width="180">
11     </el-table-column>
12     <el-table-column
13       prop="name"
14       label="姓名"
15       width="180">
16     </el-table-column>
17     <el-table-column
18       prop="address"
19       label="地址">
20     </el-table-column>
21   </el-table>
22 </template>
23 
24 <script>
25   export default {
26     data() {
27       return {
28         tableData3: [{
29           date: '2016-05-03',
30           name: '王小虎',
31           address: '上海市普陀区金沙江路 1518 弄'
32         }, {
33           date: '2016-05-02',
34           name: '王小虎',
35           address: '上海市普陀区金沙江路 1518 弄'
36         }, {
37           date: '2016-05-04',
38           name: '王小虎',
39           address: '上海市普陀区金沙江路 1518 弄'
40         }, {
41           date: '2016-05-01',
42           name: '王小虎',
43           address: '上海市普陀区金沙江路 1518 弄'
44         }, {
45           date: '2016-05-08',
46           name: '王小虎',
47           address: '上海市普陀区金沙江路 1518 弄'
48         }, {
49           date: '2016-05-06',
50           name: '王小虎',
51           address: '上海市普陀区金沙江路 1518 弄'
52         }, {
53           date: '2016-05-07',
54           name: '王小虎',
55           address: '上海市普陀区金沙江路 1518 弄'
56         }]
57       }
58     }
59   }
60 </script>
    View Code

    固定列

    横向内容过多时，可选择固定列。

    固定列需要使用fixed属性，它接受 Boolean 值或者leftright，表示左边固定还是右边固定。

     1 <template>
 2   <el-table
 3     :data="tableData"
 4     border
 5     style=" 100%">
 6     <el-table-column
 7       fixed
 8       prop="date"
 9       label="日期"
10       width="150">
11     </el-table-column>
12     <el-table-column
13       prop="name"
14       label="姓名"
15       width="120">
16     </el-table-column>
17     <el-table-column
18       prop="province"
19       label="省份"
20       width="120">
21     </el-table-column>
22     <el-table-column
23       prop="city"
24       label="市区"
25       width="120">
26     </el-table-column>
27     <el-table-column
28       prop="address"
29       label="地址"
30       width="300">
31     </el-table-column>
32     <el-table-column
33       prop="zip"
34       label="邮编"
35       width="120">
36     </el-table-column>
37     <el-table-column
38       fixed="right"
39       label="操作"
40       width="100">
41       <template slot-scope="scope">
42         <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
43         <el-button type="text" size="small">编辑</el-button>
44       </template>
45     </el-table-column>
46   </el-table>
47 </template>
48 
49 <script>
50   export default {
51     methods: {
52       handleClick(row) {
53         console.log(row);
54       }
55     },
56 
57     data() {
58       return {
59         tableData: [{
60           date: '2016-05-03',
61           name: '王小虎',
62           province: '上海',
63           city: '普陀区',
64           address: '上海市普陀区金沙江路 1518 弄',
65           zip: 200333
66         }, {
67           date: '2016-05-02',
68           name: '王小虎',
69           province: '上海',
70           city: '普陀区',
71           address: '上海市普陀区金沙江路 1518 弄',
72           zip: 200333
73         }, {
74           date: '2016-05-04',
75           name: '王小虎',
76           province: '上海',
77           city: '普陀区',
78           address: '上海市普陀区金沙江路 1518 弄',
79           zip: 200333
80         }, {
81           date: '2016-05-01',
82           name: '王小虎',
83           province: '上海',
84           city: '普陀区',
85           address: '上海市普陀区金沙江路 1518 弄',
86           zip: 200333
87         }]
88       }
89     }
90   }
91 </script>
    View Code

    固定列和表头

    横纵内容过多时，可选择固定列和表头。

    固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

     1 <template>
 2   <el-table
 3     :data="tableData3"
 4     style=" 100%"
 5     height="250">
 6     <el-table-column
 7       fixed
 8       prop="date"
 9       label="日期"
10       width="150">
11     </el-table-column>
12     <el-table-column
13       prop="name"
14       label="姓名"
15       width="120">
16     </el-table-column>
17     <el-table-column
18       prop="province"
19       label="省份"
20       width="120">
21     </el-table-column>
22     <el-table-column
23       prop="city"
24       label="市区"
25       width="120">
26     </el-table-column>
27     <el-table-column
28       prop="address"
29       label="地址"
30       width="300">
31     </el-table-column>
32     <el-table-column
33       prop="zip"
34       label="邮编"
35       width="120">
36     </el-table-column>
37   </el-table>
38 </template>
39 
40 <script>
41   export default {
42     data() {
43       return {
44         tableData3: [{
45           date: '2016-05-03',
46           name: '王小虎',
47           province: '上海',
48           city: '普陀区',
49           address: '上海市普陀区金沙江路 1518 弄',
50           zip: 200333
51         }, {
52           date: '2016-05-02',
53           name: '王小虎',
54           province: '上海',
55           city: '普陀区',
56           address: '上海市普陀区金沙江路 1518 弄',
57           zip: 200333
58         }, {
59           date: '2016-05-04',
60           name: '王小虎',
61           province: '上海',
62           city: '普陀区',
63           address: '上海市普陀区金沙江路 1518 弄',
64           zip: 200333
65         }, {
66           date: '2016-05-01',
67           name: '王小虎',
68           province: '上海',
69           city: '普陀区',
70           address: '上海市普陀区金沙江路 1518 弄',
71           zip: 200333
72         }, {
73           date: '2016-05-08',
74           name: '王小虎',
75           province: '上海',
76           city: '普陀区',
77           address: '上海市普陀区金沙江路 1518 弄',
78           zip: 200333
79         }, {
80           date: '2016-05-06',
81           name: '王小虎',
82           province: '上海',
83           city: '普陀区',
84           address: '上海市普陀区金沙江路 1518 弄',
85           zip: 200333
86         }, {
87           date: '2016-05-07',
88           name: '王小虎',
89           province: '上海',
90           city: '普陀区',
91           address: '上海市普陀区金沙江路 1518 弄',
92           zip: 200333
93         }]
94       }
95     }
96   }
97 </script>
    View Code

    流体高度

    当数据量动态变化时，可以为 Table 设置一个最大高度。

    通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。

      1 <template>
  2   <el-table
  3     :data="tableData4"
  4     style=" 100%"
  5     max-height="250">
  6     <el-table-column
  7       fixed
  8       prop="date"
  9       label="日期"
 10       width="150">
 11     </el-table-column>
 12     <el-table-column
 13       prop="name"
 14       label="姓名"
 15       width="120">
 16     </el-table-column>
 17     <el-table-column
 18       prop="province"
 19       label="省份"
 20       width="120">
 21     </el-table-column>
 22     <el-table-column
 23       prop="city"
 24       label="市区"
 25       width="120">
 26     </el-table-column>
 27     <el-table-column
 28       prop="address"
 29       label="地址"
 30       width="300">
 31     </el-table-column>
 32     <el-table-column
 33       prop="zip"
 34       label="邮编"
 35       width="120">
 36     </el-table-column>
 37     <el-table-column
 38       fixed="right"
 39       label="操作"
 40       width="120">
 41       <template slot-scope="scope">
 42         <el-button
 43           @click.native.prevent="deleteRow(scope.$index, tableData4)"
 44           type="text"
 45           size="small">
 46           移除
 47         </el-button>
 48       </template>
 49     </el-table-column>
 50   </el-table>
 51 </template>
 52 
 53 <script>
 54   export default {
 55     methods: {
 56       deleteRow(index, rows) {
 57         rows.splice(index, 1);
 58       }
 59     },
 60     data() {
 61       return {
 62         tableData4: [{
 63           date: '2016-05-03',
 64           name: '王小虎',
 65           province: '上海',
 66           city: '普陀区',
 67           address: '上海市普陀区金沙江路 1518 弄',
 68           zip: 200333
 69         }, {
 70           date: '2016-05-02',
 71           name: '王小虎',
 72           province: '上海',
 73           city: '普陀区',
 74           address: '上海市普陀区金沙江路 1518 弄',
 75           zip: 200333
 76         }, {
 77           date: '2016-05-04',
 78           name: '王小虎',
 79           province: '上海',
 80           city: '普陀区',
 81           address: '上海市普陀区金沙江路 1518 弄',
 82           zip: 200333
 83         }, {
 84           date: '2016-05-01',
 85           name: '王小虎',
 86           province: '上海',
 87           city: '普陀区',
 88           address: '上海市普陀区金沙江路 1518 弄',
 89           zip: 200333
 90         }, {
 91           date: '2016-05-08',
 92           name: '王小虎',
 93           province: '上海',
 94           city: '普陀区',
 95           address: '上海市普陀区金沙江路 1518 弄',
 96           zip: 200333
 97         }, {
 98           date: '2016-05-06',
 99           name: '王小虎',
100           province: '上海',
101           city: '普陀区',
102           address: '上海市普陀区金沙江路 1518 弄',
103           zip: 200333
104         }, {
105           date: '2016-05-07',
106           name: '王小虎',
107           province: '上海',
108           city: '普陀区',
109           address: '上海市普陀区金沙江路 1518 弄',
110           zip: 200333
111         }]
112       }
113     }
114   }
115 </script>
    View Code

    多级表头

    数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

    只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

     1 <template>
 2   <el-table
 3     :data="tableData3"
 4     style=" 100%">
 5     <el-table-column
 6       prop="date"
 7       label="日期"
 8       width="150">
 9     </el-table-column>
10     <el-table-column label="配送信息">
11       <el-table-column
12         prop="name"
13         label="姓名"
14         width="120">
15       </el-table-column>
16       <el-table-column label="地址">
17         <el-table-column
18           prop="province"
19           label="省份"
20           width="120">
21         </el-table-column>
22         <el-table-column
23           prop="city"
24           label="市区"
25           width="120">
26         </el-table-column>
27         <el-table-column
28           prop="address"
29           label="地址"
30           width="300">
31         </el-table-column>
32         <el-table-column
33           prop="zip"
34           label="邮编"
35           width="120">
36         </el-table-column>
37       </el-table-column>
38     </el-table-column>
39   </el-table>
40 </template>
41 
42 <script>
43   export default {
44     data() {
45       return {
46         tableData3: [{
47           date: '2016-05-03',
48           name: '王小虎',
49           province: '上海',
50           city: '普陀区',
51           address: '上海市普陀区金沙江路 1518 弄',
52           zip: 200333
53         }, {
54           date: '2016-05-02',
55           name: '王小虎',
56           province: '上海',
57           city: '普陀区',
58           address: '上海市普陀区金沙江路 1518 弄',
59           zip: 200333
60         }, {
61           date: '2016-05-04',
62           name: '王小虎',
63           province: '上海',
64           city: '普陀区',
65           address: '上海市普陀区金沙江路 1518 弄',
66           zip: 200333
67         }, {
68           date: '2016-05-01',
69           name: '王小虎',
70           province: '上海',
71           city: '普陀区',
72           address: '上海市普陀区金沙江路 1518 弄',
73           zip: 200333
74         }, {
75           date: '2016-05-08',
76           name: '王小虎',
77           province: '上海',
78           city: '普陀区',
79           address: '上海市普陀区金沙江路 1518 弄',
80           zip: 200333
81         }, {
82           date: '2016-05-06',
83           name: '王小虎',
84           province: '上海',
85           city: '普陀区',
86           address: '上海市普陀区金沙江路 1518 弄',
87           zip: 200333
88         }, {
89           date: '2016-05-07',
90           name: '王小虎',
91           province: '上海',
92           city: '普陀区',
93           address: '上海市普陀区金沙江路 1518 弄',
94           zip: 200333
95         }]
96       }
97     }
98   }
99 </script>
    View Code

    单选

    选择单行数据时使用色块表示。

    Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。

     1 <template>
 2   <el-table
 3     ref="singleTable"
 4     :data="tableData"
 5     highlight-current-row
 6     @current-change="handleCurrentChange"
 7     style=" 100%">
 8     <el-table-column
 9       type="index"
10       width="50">
11     </el-table-column>
12     <el-table-column
13       property="date"
14       label="日期"
15       width="120">
16     </el-table-column>
17     <el-table-column
18       property="name"
19       label="姓名"
20       width="120">
21     </el-table-column>
22     <el-table-column
23       property="address"
24       label="地址">
25     </el-table-column>
26   </el-table>
27   <div style="margin-top: 20px">
28     <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
29     <el-button @click="setCurrent()">取消选择</el-button>
30   </div>
31 </template>
32 
33 <script>
34   export default {
35     data() {
36       return {
37         tableData: [{
38           date: '2016-05-02',
39           name: '王小虎',
40           address: '上海市普陀区金沙江路 1518 弄'
41         }, {
42           date: '2016-05-04',
43           name: '王小虎',
44           address: '上海市普陀区金沙江路 1517 弄'
45         }, {
46           date: '2016-05-01',
47           name: '王小虎',
48           address: '上海市普陀区金沙江路 1519 弄'
49         }, {
50           date: '2016-05-03',
51           name: '王小虎',
52           address: '上海市普陀区金沙江路 1516 弄'
53         }],
54         currentRow: null
55       }
56     },
57 
58     methods: {
59       setCurrent(row) {
60         this.$refs.singleTable.setCurrentRow(row);
61       },
62       handleCurrentChange(val) {
63         this.currentRow = val;
64       }
65     }
66   }
67 </script>
    View Code

    多选

    选择多行数据时使用 Checkbox。

    实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

     1 <template>
 2   <el-table
 3     ref="multipleTable"
 4     :data="tableData3"
 5     tooltip-effect="dark"
 6     style=" 100%"
 7     @selection-change="handleSelectionChange">
 8     <el-table-column
 9       type="selection"
10       width="55">
11     </el-table-column>
12     <el-table-column
13       label="日期"
14       width="120">
15       <template slot-scope="scope">{{ scope.row.date }}</template>
16     </el-table-column>
17     <el-table-column
18       prop="name"
19       label="姓名"
20       width="120">
21     </el-table-column>
22     <el-table-column
23       prop="address"
24       label="地址"
25       show-overflow-tooltip>
26     </el-table-column>
27   </el-table>
28   <div style="margin-top: 20px">
29     <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
30     <el-button @click="toggleSelection()">取消选择</el-button>
31   </div>
32 </template>
33 
34 <script>
35   export default {
36     data() {
37       return {
38         tableData3: [{
39           date: '2016-05-03',
40           name: '王小虎',
41           address: '上海市普陀区金沙江路 1518 弄'
42         }, {
43           date: '2016-05-02',
44           name: '王小虎',
45           address: '上海市普陀区金沙江路 1518 弄'
46         }, {
47           date: '2016-05-04',
48           name: '王小虎',
49           address: '上海市普陀区金沙江路 1518 弄'
50         }, {
51           date: '2016-05-01',
52           name: '王小虎',
53           address: '上海市普陀区金沙江路 1518 弄'
54         }, {
55           date: '2016-05-08',
56           name: '王小虎',
57           address: '上海市普陀区金沙江路 1518 弄'
58         }, {
59           date: '2016-05-06',
60           name: '王小虎',
61           address: '上海市普陀区金沙江路 1518 弄'
62         }, {
63           date: '2016-05-07',
64           name: '王小虎',
65           address: '上海市普陀区金沙江路 1518 弄'
66         }],
67         multipleSelection: []
68       }
69     },
70 
71     methods: {
72       toggleSelection(rows) {
73         if (rows) {
74           rows.forEach(row => {
75             this.$refs.multipleTable.toggleRowSelection(row);
76           });
77         } else {
78           this.$refs.multipleTable.clearSelection();
79         }
80       },
81       handleSelectionChange(val) {
82         this.multipleSelection = val;
83       }
84     }
85   }
86 </script>
    View Code

    排序

    对表格进行排序，可快速查找或对比数据。

    在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

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

    筛选

    对表格进行筛选，可快速查找到自己想看的数据。

    在列中设置filtersfilter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。

     1 <template>
 2   <el-table
 3     :data="tableData"
 4     style=" 100%">
 5     <el-table-column
 6       prop="date"
 7       label="日期"
 8       sortable
 9       width="180"
10       :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
11       :filter-method="filterHandler"
12     >
13     </el-table-column>
14     <el-table-column
15       prop="name"
16       label="姓名"
17       width="180">
18     </el-table-column>
19     <el-table-column
20       prop="address"
21       label="地址"
22       :formatter="formatter">
23     </el-table-column>
24     <el-table-column
25       prop="tag"
26       label="标签"
27       width="100"
28       :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
29       :filter-method="filterTag"
30       filter-placement="bottom-end">
31       <template slot-scope="scope">
32         <el-tag
33           :type="scope.row.tag === '家' ? 'primary' : 'success'"
34           close-transition>{{scope.row.tag}}</el-tag>
35       </template>
36     </el-table-column>
37   </el-table>
38 </template>
39 
40 <script>
41   export default {
42     data() {
43       return {
44         tableData: [{
45           date: '2016-05-02',
46           name: '王小虎',
47           address: '上海市普陀区金沙江路 1518 弄',
48           tag: '家'
49         }, {
50           date: '2016-05-04',
51           name: '王小虎',
52           address: '上海市普陀区金沙江路 1517 弄',
53           tag: '公司'
54         }, {
55           date: '2016-05-01',
56           name: '王小虎',
57           address: '上海市普陀区金沙江路 1519 弄',
58           tag: '家'
59         }, {
60           date: '2016-05-03',
61           name: '王小虎',
62           address: '上海市普陀区金沙江路 1516 弄',
63           tag: '公司'
64         }]
65       }
66     },
67     methods: {
68       formatter(row, column) {
69         return row.address;
70       },
71       filterTag(value, row) {
72         return row.tag === value;
73       },
74       filterHandler(value, row, column) {
75         const property = column['property'];
76         return row[property] === value;
77       }
78     }
79   }
80 </script>
    View Code

    自定义列模板

    自定义列的显示内容，可组合其他组件使用。

    通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。

     1 <template>
 2   <el-table
 3     :data="tableData"
 4     style=" 100%">
 5     <el-table-column
 6       label="日期"
 7       width="180">
 8       <template slot-scope="scope">
 9         <i class="el-icon-time"></i>
10         <span style="margin-left: 10px">{{ scope.row.date }}</span>
11       </template>
12     </el-table-column>
13     <el-table-column
14       label="姓名"
15       width="180">
16       <template slot-scope="scope">
17         <el-popover trigger="hover" placement="top">
18           <p>姓名: {{ scope.row.name }}</p>
19           <p>住址: {{ scope.row.address }}</p>
20           <div slot="reference" class="name-wrapper">
21             <el-tag size="medium">{{ scope.row.name }}</el-tag>
22           </div>
23         </el-popover>
24       </template>
25     </el-table-column>
26     <el-table-column label="操作">
27       <template slot-scope="scope">
28         <el-button
29           size="mini"
30           @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
31         <el-button
32           size="mini"
33           type="danger"
34           @click="handleDelete(scope.$index, scope.row)">删除</el-button>
35       </template>
36     </el-table-column>
37   </el-table>
38 </template>
39 
40 <script>
41   export default {
42     data() {
43       return {
44         tableData: [{
45           date: '2016-05-02',
46           name: '王小虎',
47           address: '上海市普陀区金沙江路 1518 弄'
48         }, {
49           date: '2016-05-04',
50           name: '王小虎',
51           address: '上海市普陀区金沙江路 1517 弄'
52         }, {
53           date: '2016-05-01',
54           name: '王小虎',
55           address: '上海市普陀区金沙江路 1519 弄'
56         }, {
57           date: '2016-05-03',
58           name: '王小虎',
59           address: '上海市普陀区金沙江路 1516 弄'
60         }]
61       }
62     },
63     methods: {
64       handleEdit(index, row) {
65         console.log(index, row);
66       },
67       handleDelete(index, row) {
68         console.log(index, row);
69       }
70     }
71   }
72 </script>
    View Code

    展开行

    当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

    通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

      1 <template>
  2   <el-table
  3     :data="tableData5"
  4     style=" 100%">
  5     <el-table-column type="expand">
  6       <template slot-scope="props">
  7         <el-form label-position="left" inline class="demo-table-expand">
  8           <el-form-item label="商品名称">
  9             <span>{{ props.row.name }}</span>
 10           </el-form-item>
 11           <el-form-item label="所属店铺">
 12             <span>{{ props.row.shop }}</span>
 13           </el-form-item>
 14           <el-form-item label="商品 ID">
 15             <span>{{ props.row.id }}</span>
 16           </el-form-item>
 17           <el-form-item label="店铺 ID">
 18             <span>{{ props.row.shopId }}</span>
 19           </el-form-item>
 20           <el-form-item label="商品分类">
 21             <span>{{ props.row.category }}</span>
 22           </el-form-item>
 23           <el-form-item label="店铺地址">
 24             <span>{{ props.row.address }}</span>
 25           </el-form-item>
 26           <el-form-item label="商品描述">
 27             <span>{{ props.row.desc }}</span>
 28           </el-form-item>
 29         </el-form>
 30       </template>
 31     </el-table-column>
 32     <el-table-column
 33       label="商品 ID"
 34       prop="id">
 35     </el-table-column>
 36     <el-table-column
 37       label="商品名称"
 38       prop="name">
 39     </el-table-column>
 40     <el-table-column
 41       label="描述"
 42       prop="desc">
 43     </el-table-column>
 44   </el-table>
 45 </template>
 46 
 47 <style>
 48   .demo-table-expand {
 49     font-size: 0;
 50   }
 51   .demo-table-expand label {
 52     width: 90px;
 53     color: #99a9bf;
 54   }
 55   .demo-table-expand .el-form-item {
 56     margin-right: 0;
 57     margin-bottom: 0;
 58     width: 50%;
 59   }
 60 </style>
 61 
 62 <script>
 63   export default {
 64     data() {
 65       return {
 66         tableData5: [{
 67           id: '12987122',
 68           name: '好滋好味鸡蛋仔',
 69           category: '江浙小吃、小吃零食',
 70           desc: '荷兰优质淡奶，奶香浓而不腻',
 71           address: '上海市普陀区真北路',
 72           shop: '王小虎夫妻店',
 73           shopId: '10333'
 74         }, {
 75           id: '12987123',
 76           name: '好滋好味鸡蛋仔',
 77           category: '江浙小吃、小吃零食',
 78           desc: '荷兰优质淡奶，奶香浓而不腻',
 79           address: '上海市普陀区真北路',
 80           shop: '王小虎夫妻店',
 81           shopId: '10333'
 82         }, {
 83           id: '12987125',
 84           name: '好滋好味鸡蛋仔',
 85           category: '江浙小吃、小吃零食',
 86           desc: '荷兰优质淡奶，奶香浓而不腻',
 87           address: '上海市普陀区真北路',
 88           shop: '王小虎夫妻店',
 89           shopId: '10333'
 90         }, {
 91           id: '12987126',
 92           name: '好滋好味鸡蛋仔',
 93           category: '江浙小吃、小吃零食',
 94           desc: '荷兰优质淡奶，奶香浓而不腻',
 95           address: '上海市普陀区真北路',
 96           shop: '王小虎夫妻店',
 97           shopId: '10333'
 98         }]
 99       }
100     }
101   }
102 </script>
    View Code

    表尾合计行

    若表格展示的是各类数字，可以在表尾显示各列的合计。

    将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。

      1 <template>
  2   <el-table
  3     :data="tableData6"
  4     border
  5     show-summary
  6     style=" 100%">
  7     <el-table-column
  8       prop="id"
  9       label="ID"
 10       width="180">
 11     </el-table-column>
 12     <el-table-column
 13       prop="name"
 14       label="姓名">
 15     </el-table-column>
 16     <el-table-column
 17       prop="amount1"
 18       sortable
 19       label="数值 1">
 20     </el-table-column>
 21     <el-table-column
 22       prop="amount2"
 23       sortable
 24       label="数值 2">
 25     </el-table-column>
 26     <el-table-column
 27       prop="amount3"
 28       sortable
 29       label="数值 3">
 30     </el-table-column>
 31   </el-table>
 32   
 33   <el-table
 34     :data="tableData6"
 35     border
 36     height="200"
 37     :summary-method="getSummaries"
 38     show-summary
 39     style=" 100%; margin-top: 20px">
 40     <el-table-column
 41       prop="id"
 42       label="ID"
 43       width="180">
 44     </el-table-column>
 45     <el-table-column
 46       prop="name"
 47       label="姓名">
 48     </el-table-column>
 49     <el-table-column
 50       prop="amount1"
 51       label="数值 1（元）">
 52     </el-table-column>
 53     <el-table-column
 54       prop="amount2"
 55       label="数值 2（元）">
 56     </el-table-column>
 57     <el-table-column
 58       prop="amount3"
 59       label="数值 3（元）">
 60     </el-table-column>
 61   </el-table>
 62 </template>
 63 
 64 <script>
 65   export default {
 66     data() {
 67       return {
 68         tableData6: [{
 69           id: '12987122',
 70           name: '王小虎',
 71           amount1: '234',
 72           amount2: '3.2',
 73           amount3: 10
 74         }, {
 75           id: '12987123',
 76           name: '王小虎',
 77           amount1: '165',
 78           amount2: '4.43',
 79           amount3: 12
 80         }, {
 81           id: '12987124',
 82           name: '王小虎',
 83           amount1: '324',
 84           amount2: '1.9',
 85           amount3: 9
 86         }, {
 87           id: '12987125',
 88           name: '王小虎',
 89           amount1: '621',
 90           amount2: '2.2',
 91           amount3: 17
 92         }, {
 93           id: '12987126',
 94           name: '王小虎',
 95           amount1: '539',
 96           amount2: '4.1',
 97           amount3: 15
 98         }]
 99       };
100     },
101     methods: {
102       getSummaries(param) {
103         const { columns, data } = param;
104         const sums = [];
105         columns.forEach((column, index) => {
106           if (index === 0) {
107             sums[index] = '总价';
108             return;
109           }
110           const values = data.map(item => Number(item[column.property]));
111           if (!values.every(value => isNaN(value))) {
112             sums[index] = values.reduce((prev, curr) => {
113               const value = Number(curr);
114               if (!isNaN(value)) {
115                 return prev + curr;
116               } else {
117                 return prev;
118               }
119             }, 0);
120             sums[index] += ' 元';
121           } else {
122             sums[index] = 'N/A';
123           }
124         });
125 
126         return sums;
127       }
128     }
129   };
130 </script>
    View Code

    合并行或列

    多行或多列共用一个数据时，可以合并行或列。

    通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

      1 <template>
  2   <div>
  3     <el-table
  4       :data="tableData6"
  5       :span-method="arraySpanMethod"
  6       border
  7       style=" 100%">
  8       <el-table-column
  9         prop="id"
 10         label="ID"
 11         width="180">
 12       </el-table-column>
 13       <el-table-column
 14         prop="name"
 15         label="姓名">
 16       </el-table-column>
 17       <el-table-column
 18         prop="amount1"
 19         sortable
 20         label="数值 1">
 21       </el-table-column>
 22       <el-table-column
 23         prop="amount2"
 24         sortable
 25         label="数值 2">
 26       </el-table-column>
 27       <el-table-column
 28         prop="amount3"
 29         sortable
 30         label="数值 3">
 31       </el-table-column>
 32     </el-table>
 33 
 34     <el-table
 35       :data="tableData6"
 36       :span-method="objectSpanMethod"
 37       border
 38       style=" 100%; margin-top: 20px">
 39       <el-table-column
 40         prop="id"
 41         label="ID"
 42         width="180">
 43       </el-table-column>
 44       <el-table-column
 45         prop="name"
 46         label="姓名">
 47       </el-table-column>
 48       <el-table-column
 49         prop="amount1"
 50         label="数值 1（元）">
 51       </el-table-column>
 52       <el-table-column
 53         prop="amount2"
 54         label="数值 2（元）">
 55       </el-table-column>
 56       <el-table-column
 57         prop="amount3"
 58         label="数值 3（元）">
 59       </el-table-column>
 60     </el-table>
 61   </div>
 62 </template>
 63 
 64 <script>
 65   export default {
 66     data() {
 67       return {
 68         tableData6: [{
 69           id: '12987122',
 70           name: '王小虎',
 71           amount1: '234',
 72           amount2: '3.2',
 73           amount3: 10
 74         }, {
 75           id: '12987123',
 76           name: '王小虎',
 77           amount1: '165',
 78           amount2: '4.43',
 79           amount3: 12
 80         }, {
 81           id: '12987124',
 82           name: '王小虎',
 83           amount1: '324',
 84           amount2: '1.9',
 85           amount3: 9
 86         }, {
 87           id: '12987125',
 88           name: '王小虎',
 89           amount1: '621',
 90           amount2: '2.2',
 91           amount3: 17
 92         }, {
 93           id: '12987126',
 94           name: '王小虎',
 95           amount1: '539',
 96           amount2: '4.1',
 97           amount3: 15
 98         }]
 99       };
100     },
101     methods: {
102       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
103         if (rowIndex % 2 === 0) {
104           if (columnIndex === 0) {
105             return [1, 2];
106           } else if (columnIndex === 1) {
107             return [0, 0];
108           }
109         }
110       },
111 
112       objectSpanMethod({ row, column, rowIndex, columnIndex }) {
113         if (columnIndex === 0) {
114           if (rowIndex % 2 === 0) {
115             return {
116               rowspan: 2,
117               colspan: 1
118             };
119           } else {
120             return {
121               rowspan: 0,
122               colspan: 0
123             };
124           }
125         }
126       }
127     }
128   };
129 </script>
    View Code

    自定义索引

    自定义 type=index 列的行号。

    通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。

     1 <template>
 2   <el-table
 3     :data="tableData"
 4     style=" 100%">
 5     <el-table-column
 6       type="index"
 7       :index="indexMethod">
 8     </el-table-column>
 9     <el-table-column
10       prop="date"
11       label="日期"
12       width="180">
13     </el-table-column>
14     <el-table-column
15       prop="name"
16       label="姓名"
17       width="180">
18     </el-table-column>
19     <el-table-column
20       prop="address"
21       label="地址">
22     </el-table-column>
23   </el-table>
24 </template>
25 
26 <script>
27   export default {
28     data() {
29       return {
30         tableData: [{
31           date: '2016-05-03',
32           name: '王小虎',
33           province: '上海',
34           city: '普陀区',
35           address: '上海市普陀区金沙江路 1518 弄',
36           zip: 200333,
37           tag: '家'
38         }, {
39           date: '2016-05-02',
40           name: '王小虎',
41           province: '上海',
42           city: '普陀区',
43           address: '上海市普陀区金沙江路 1518 弄',
44           zip: 200333,
45           tag: '公司'
46         }, {
47           date: '2016-05-04',
48           name: '王小虎',
49           province: '上海',
50           city: '普陀区',
51           address: '上海市普陀区金沙江路 1518 弄',
52           zip: 200333,
53           tag: '家'
54         }, {
55           date: '2016-05-01',
56           name: '王小虎',
57           province: '上海',
58           city: '普陀区',
59           address: '上海市普陀区金沙江路 1518 弄',
60           zip: 200333,
61           tag: '公司'
62         }],
63       }
64     },
65     methods: {
66       indexMethod(index) {
67         return index * 2;
68       }
69     }
70   };
71 </script>
    View Code

    Table Attributes

    参数说明类型可选值默认值
    data 显示的数据 array — —
    height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 string/number — —
    max-height Table 的最大高度 string/number — —
    stripe 是否为斑马纹 table boolean — false
    border 是否带有纵向边框 boolean — false
    size Table 的尺寸 string medium / small / mini —
    fit 列的宽度是否自撑开 boolean — true
    show-header 是否显示表头 boolean — true
    highlight-current-row 是否要高亮当前行 boolean — false
    current-row-key 当前行的 key，只写属性 String,Number — —
    row-class-name 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex})/String — —
    row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 Function({row, rowIndex})/Object — —
    cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String — —
    cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex})/Object — —
    header-row-class-name 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 Function({row, rowIndex})/String — —
    header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 Function({row, rowIndex})/Object — —
    header-cell-class-name 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String — —
    header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 Function({row, rowIndex, rowIndex, columnIndex})/Object — —
    row-key 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 Function(row)/String — —
    empty-text 空数据时显示的文本内容，也可以通过 slot="empty" 设置 String — 暂无数据
    default-expand-all 是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效 Boolean — false
    expand-row-keys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 Array —  
    default-sort 默认的排序列的prop和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序 Object order: ascending, descending 如果只指定了prop, 没有指定order, 则默认顺序是ascending
    tooltip-effect tooltip effect 属性 String dark/light  
    show-summary 是否在表尾显示合计行 Boolean — false
    sum-text 合计行第一列的文本 String — 合计
    summary-method 自定义的合计计算方法 Function({ columns, data }) — —
    span-method 合并行或列的计算方法 Function({ row, column, rowIndex, columnIndex }) — —

    Table Events

    事件名说明参数
    select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row
    select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection
    selection-change 当选择项发生变化时会触发该事件 selection
    cell-mouse-enter 当单元格 hover 进入时会触发该事件 row, column, cell, event
    cell-mouse-leave 当单元格 hover 退出时会触发该事件 row, column, cell, event
    cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
    cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event
    row-click 当某一行被点击时会触发该事件 row, event, column
    row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, event
    row-dblclick 当某一行被双击时会触发该事件 row, event
    header-click 当某一列的表头被点击时会触发该事件 column, event
    header-contextmenu 当某一列的表头被鼠标右键点击时触发该事件 column, event
    sort-change 当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }
    filter-change 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 filters
    current-change 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 currentRow, oldCurrentRow
    header-dragend 当拖动表头改变了列的宽度的时候会触发该事件 newWidth, oldWidth, column, event
    expand-change 当用户对某一行展开或者关闭的时候会触发该事件 row, expandedRows

    Table Methods

    方法名说明参数
    clearSelection 用于多选表格，清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法 selection
    toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） row, selected
    toggleRowExpansion 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） row, expanded
    setCurrentRow 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 row
    clearSort 用于清空排序条件，数据会恢复成未排序的状态 —
    clearFilter 用于清空过滤条件，数据会恢复成未过滤的状态 —
    doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 —

    Table Slot

    name说明
    append 插入至表格最后一行之后的内容，如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。

    Table-column Attributes

    参数说明类型可选值默认值
    type 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 string selection/index/expand —
    index 如果设置了 type=index，可以通过传递 index 属性来自定义索引 string, Function(index) - -
    column-key column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 string — —
    label 显示的标题 string — —
    prop 对应列内容的字段名，也可以使用 property 属性 string — —
    width 对应列的宽度 string — —
    min-width 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 string — —
    fixed 列是否固定在左侧或者右侧，true 表示固定在左侧 string, boolean true, left, right —
    render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index }) — —
    sortable 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 boolean, string true, false, 'custom' false
    sort-method 对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致 Function(a, b) — —
    sort-by 指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推。 String/Array/Function(row, index) — —
    resizable 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真） boolean — true
    formatter 用来格式化内容 Function(row, column, cellValue) — —
    show-overflow-tooltip 当内容过长被隐藏时显示 tooltip Boolean — false
    align 对齐方式 String left/center/right left
    header-align 表头对齐方式，若不设置该项，则使用表格的对齐方式 String left/center/right —
    class-name 列的 className string — —
    label-class-name 当前列标题的自定义类名 string — —
    selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 Function(row, index) — —
    reserve-selection 仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。 Boolean — false
    filters 数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。 Array[{ text, value }] — —
    filter-placement 过滤弹出框的定位 String 与 Tooltip 的 placement 属性相同 —
    filter-multiple 数据过滤的选项是否多选 Boolean — true
    filter-method 数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。 Function(value, row, column) — —
    filtered-value 选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。 Array — —
  • 相关阅读:
    HDU 4539郑厂长系列故事――排兵布阵（状压DP）
    HDU 2196Computer（树形DP）
    HDU 4284Travel（状压DP）
    HDU 1520Anniversary party（树型DP）
    HDU 3920Clear All of Them I（状压DP）
    HDU 3853LOOPS(简单概率DP)
    UVA 11983 Weird Advertisement（线段树求矩形并的面积）
    POJ 2886Who Gets the Most Candies?（线段树）
    POJ 2828Buy Tickets
    HDU 1394Minimum Inversion Number（线段树）
  • 原文地址：https://www.cnblogs.com/grt322/p/8553353.html
Copyright © 2011-2022 走看看