Table 表格

本文轉載自查看原文 2018-03-13 07:30 1188 Data組件

用於展示多條結構類似的數據，可對數據進行排序、篩選、對比或其他自定義操作。

基礎表格

基礎的表格展示用法。

當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

帶斑馬紋表格

使用帶斑馬紋的表格，可以更容易區分出不同行的數據。

stripe屬性可以創建帶斑馬紋的表格。它接受一個Boolean，默認為false，設置為true即為啟用。

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 table表格動態合並 table 表格配色 table 表格自適應 table表格，頂端對齊 jquery操作table表格原生table表格的使用 bs4_.table（表格） table表格的合並動態Bootstrap Table 表格 layui table表格詳解