devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ElementUI浅尝辄止15：Table 表格_elementui table

作者：IT小白 | 2024-05-25 09:59:13

赞

踩

elementui table

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

Table组件比较常用，常见于数据查询，报表页面，用来展示表格数据。

1.如何使用？

  1. 	
  2. //当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中
  3. //的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
  4.  
  5.   <template>
  6.     <el-table
  7.       :data="tableData"
  8.       style="width: 100%">
  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-02',
  32.             name: '王小虎',
  33.             address: '上海市普陀区金沙江路 1518 弄'
  34.           }, {
  35.             date: '2016-05-04',
  36.             name: '王小虎',
  37.             address: '上海市普陀区金沙江路 1517 弄'
  38.           }, {
  39.             date: '2016-05-01',
  40.             name: '王小虎',
  41.             address: '上海市普陀区金沙江路 1519 弄'
  42.           }
  43.            ]
  44.         }
  45.       }
  46.     }
  47.   </script>

2.带斑马纹表格

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

  1. //stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。
  2.  
  3. <template>
  4.   <el-table
  5.     :data="tableData"
  6.     stripe
  7.     style="width: 100%">
  8.     <el-table-column
  9.       prop="date"
  10.       label="日期"
  11.       width="180">
  12.     </el-table-column>
  13.     <el-table-column
  14.       prop="name"
  15.       label="姓名"
  16.       width="180">
  17.     </el-table-column>
  18.     <el-table-column
  19.       prop="address"
  20.       label="地址">
  21.     </el-table-column>
  22.   </el-table>
  23. </template>
  24.  
  25. <script>
  26.   export default {
  27.     data() {
  28.       return {
  29.         tableData: [{
  30.           date: '2016-05-02',
  31.           name: '王小虎',
  32.           address: '上海市普陀区金沙江路 1518 弄'
  33.         }, {
  34.           date: '2016-05-04',
  35.           name: '王小虎',
  36.           address: '上海市普陀区金沙江路 1517 弄'
  37.         }, {
  38.           date: '2016-05-01',
  39.           name: '王小虎',
  40.           address: '上海市普陀区金沙江路 1519 弄'
  41.         }]
  42.       }
  43.     }
  44.   }
  45. </script>

3.带边框表格

  1. 默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用border属性，它接受一个Boolean，设置为true即可启用。
  2.  
  3. <template>
  4.   <el-table
  5.     :data="tableData"
  6.     border
  7.     style="width: 100%">
  8.     <el-table-column
  9.       prop="date"
  10.       label="日期"
  11.       width="180">
  12.     </el-table-column>
  13.     <el-table-column
  14.       prop="name"
  15.       label="姓名"
  16.       width="180">
  17.     </el-table-column>
  18.     <el-table-column
  19.       prop="address"
  20.       label="地址">
  21.     </el-table-column>
  22.   </el-table>
  23. </template>
  24.  
  25. <script>
  26.   export default {
  27.     data() {
  28.       return {
  29.         tableData: [{
  30.           date: '2016-05-02',
  31.           name: '王小虎',
  32.           address: '上海市普陀区金沙江路 1518 弄'
  33.         }, {
  34.           date: '2016-05-04',
  35.           name: '王小虎',
  36.           address: '上海市普陀区金沙江路 1517 弄'
  37.         }, {
  38.           date: '2016-05-01',
  39.           name: '王小虎',
  40.           address: '上海市普陀区金沙江路 1519 弄'
  41.         }]
  42.       }
  43.     }
  44.   }
  45. </script>

4.带状态表格

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

  1. //可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。
  2.  
  3. <template>
  4.   <el-table
  5.     :data="tableData"
  6.     style="width: 100%"
  7.     :row-class-name="tableRowClassName">
  8.     <el-table-column
  9.       prop="date"
  10.       label="日期"
  11.       width="180">
  12.     </el-table-column>
  13.     <el-table-column
  14.       prop="name"
  15.       label="姓名"
  16.       width="180">
  17.     </el-table-column>
  18.     <el-table-column
  19.       prop="address"
  20.       label="地址">
  21.     </el-table-column>
  22.   </el-table>
  23. </template>
  24.  
  25. <style>
  26.   .el-table .warning-row {
  27.     background: oldlace;
  28.   }
  29.  
  30.   .el-table .success-row {
  31.     background: #f0f9eb;
  32.   }
  33. </style>
  34.  
  35. <script>
  36.   export default {
  37.     methods: {
  38.       tableRowClassName({row, rowIndex}) {
  39.         if (rowIndex === 1) {
  40.           return 'warning-row';
  41.         } else if (rowIndex === 3) {
  42.           return 'success-row';
  43.         }
  44.         return '';
  45.       }
  46.     },
  47.     data() {
  48.       return {
  49.         tableData: [{
  50.           date: '2016-05-02',
  51.           name: '王小虎',
  52.           address: '上海市普陀区金沙江路 1518 弄',
  53.         }, {
  54.           date: '2016-05-04',
  55.           name: '王小虎',
  56.           address: '上海市普陀区金沙江路 1518 弄'
  57.         }, {
  58.           date: '2016-05-01',
  59.           name: '王小虎',
  60.           address: '上海市普陀区金沙江路 1518 弄',
  61.         }, {
  62.           date: '2016-05-03',
  63.           name: '王小虎',
  64.           address: '上海市普陀区金沙江路 1518 弄'
  65.         }]
  66.       }
  67.     }
  68.   }
  69. </script>

5.固定表头

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

  1. //只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。
  2.  
  3. <template>
  4.   <el-table
  5.     :data="tableData"
  6.     height="250"
  7.     border
  8.     style="width: 100%">
  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.           address: '上海市普陀区金沙江路 1518 弄'
  34.         }, {
  35.           date: '2016-05-02',
  36.           name: '王小虎',
  37.           address: '上海市普陀区金沙江路 1518 弄'
  38.         }, {
  39.           date: '2016-05-04',
  40.           name: '王小虎',
  41.           address: '上海市普陀区金沙江路 1518 弄'
  42.         }, {
  43.           date: '2016-05-01',
  44.           name: '王小虎',
  45.           address: '上海市普陀区金沙江路 1518 弄'
  46.         }, {
  47.           date: '2016-05-08',
  48.           name: '王小虎',
  49.           address: '上海市普陀区金沙江路 1518 弄'
  50.         }, {
  51.           date: '2016-05-06',
  52.           name: '王小虎',
  53.           address: '上海市普陀区金沙江路 1518 弄'
  54.         }, {
  55.           date: '2016-05-07',
  56.           name: '王小虎',
  57.           address: '上海市普陀区金沙江路 1518 弄'
  58.         }]
  59.       }
  60.     }
  61.   }
  62. </script>

6.固定列

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

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

7.固定列和表头

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

  1. 固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。
  2.  
  3. <template>
  4.   <el-table
  5.     :data="tableData"
  6.     style="width: 100%"
  7.     height="250">
  8.     <el-table-column
  9.       fixed
  10.       prop="date"
  11.       label="日期"
  12.       width="150">
  13.     </el-table-column>
  14.     <el-table-column
  15.       prop="name"
  16.       label="姓名"
  17.       width="120">
  18.     </el-table-column>
  19.     <el-table-column
  20.       prop="province"
  21.       label="省份"
  22.       width="120">
  23.     </el-table-column>
  24.     <el-table-column
  25.       prop="city"
  26.       label="市区"
  27.       width="120">
  28.     </el-table-column>
  29.     <el-table-column
  30.       prop="address"
  31.       label="地址"
  32.       width="300">
  33.     </el-table-column>
  34.     <el-table-column
  35.       prop="zip"
  36.       label="邮编"
  37.       width="120">
  38.     </el-table-column>
  39.   </el-table>
  40. </template>
  41.  
  42. <script>
  43.   export default {
  44.     data() {
  45.       return {
  46.         tableData: [{
  47.           date: '2016-05-03',
  48.           name: '王小虎',
  49.           province: '上海',
  50.           city: '普陀区',
  51.           address: '上海市普陀区金沙江路 1518 弄',
  52.           zip: 200333
  53.         }, {
  54.           date: '2016-05-08',
  55.           name: '王小虎',
  56.           province: '上海',
  57.           city: '普陀区',
  58.           address: '上海市普陀区金沙江路 1518 弄',
  59.           zip: 200333
  60.         }, {
  61.           date: '2016-05-06',
  62.           name: '王小虎',
  63.           province: '上海',
  64.           city: '普陀区',
  65.           address: '上海市普陀区金沙江路 1518 弄',
  66.           zip: 200333
  67.         }, {
  68.           date: '2016-05-07',
  69.           name: '王小虎',
  70.           province: '上海',
  71.           city: '普陀区',
  72.           address: '上海市普陀区金沙江路 1518 弄',
  73.           zip: 200333
  74.         }]
  75.       }
  76.     }
  77.   }
  78. </script>

8.流体高度

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

  1. //通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
  2.  
  3. <template>
  4.   <el-table
  5.     :data="tableData"
  6.     style="width: 100%"
  7.     max-height="250">
  8.     <el-table-column
  9.       fixed
  10.       prop="date"
  11.       label="日期"
  12.       width="150">
  13.     </el-table-column>
  14.     <el-table-column
  15.       prop="name"
  16.       label="姓名"
  17.       width="120">
  18.     </el-table-column>
  19.     <el-table-column
  20.       prop="province"
  21.       label="省份"
  22.       width="120">
  23.     </el-table-column>
  24.     <el-table-column
  25.       prop="city"
  26.       label="市区"
  27.       width="120">
  28.     </el-table-column>
  29.     <el-table-column
  30.       prop="address"
  31.       label="地址"
  32.       width="300">
  33.     </el-table-column>
  34.     <el-table-column
  35.       prop="zip"
  36.       label="邮编"
  37.       width="120">
  38.     </el-table-column>
  39.     <el-table-column
  40.       fixed="right"
  41.       label="操作"
  42.       width="120">
  43.       <template slot-scope="scope">
  44.         <el-button
  45.           @click.native.prevent="deleteRow(scope.$index, tableData)"
  46.           type="text"
  47.           size="small">
  48.           移除
  49.         </el-button>
  50.       </template>
  51.     </el-table-column>
  52.   </el-table>
  53. </template>
  54.  
  55. <script>
  56.   export default {
  57.     methods: {
  58.       deleteRow(index, rows) {
  59.         rows.splice(index, 1);
  60.       }
  61.     },
  62.     data() {
  63.       return {
  64.         tableData: [{
  65.           date: '2016-05-03',
  66.           name: '王小虎',
  67.           province: '上海',
  68.           city: '普陀区',
  69.           address: '上海市普陀区金沙江路 1518 弄',
  70.           zip: 200333
  71.         }, {
  72.           date: '2016-05-02',
  73.           name: '王小虎',
  74.           province: '上海',
  75.           city: '普陀区',
  76.           address: '上海市普陀区金沙江路 1518 弄',
  77.           zip: 200333
  78.         }, {
  79.           date: '2016-05-04',
  80.           name: '王小虎',
  81.           province: '上海',
  82.           city: '普陀区',
  83.           address: '上海市普陀区金沙江路 1518 弄',
  84.           zip: 200333
  85.         }, {
  86.           date: '2016-05-01',
  87.           name: '王小虎',
  88.           province: '上海',
  89.           city: '普陀区',
  90.           address: '上海市普陀区金沙江路 1518 弄',
  91.           zip: 200333
  92.         }]
  93.       }
  94.     }
  95.   }
  96. </script>

9.多级表头

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

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

 10.单选

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

  1. //Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。
  2. //之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。
  3. //如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。
  4.  
  5. <template>
  6.   <el-table
  7.     ref="singleTable"
  8.     :data="tableData"
  9.     highlight-current-row
  10.     @current-change="handleCurrentChange"
  11.     style="width: 100%">
  12.     <el-table-column
  13.       type="index"
  14.       width="50">
  15.     </el-table-column>
  16.     <el-table-column
  17.       property="date"
  18.       label="日期"
  19.       width="120">
  20.     </el-table-column>
  21.     <el-table-column
  22.       property="name"
  23.       label="姓名"
  24.       width="120">
  25.     </el-table-column>
  26.     <el-table-column
  27.       property="address"
  28.       label="地址">
  29.     </el-table-column>
  30.   </el-table>
  31.   <div style="margin-top: 20px">
  32.     <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
  33.     <el-button @click="setCurrent()">取消选择</el-button>
  34.   </div>
  35. </template>
  36.  
  37. <script>
  38.   export default {
  39.     data() {
  40.       return {
  41.         tableData: [{
  42.           date: '2016-05-02',
  43.           name: '王小虎',
  44.           address: '上海市普陀区金沙江路 1518 弄'
  45.         }, {
  46.           date: '2016-05-04',
  47.           name: '王小虎',
  48.           address: '上海市普陀区金沙江路 1517 弄'
  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>

11.多选

选择多行数据时使用 Checkbox。

  1. //实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；
  2. //默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，
  3. //它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
  4.  
  5. <template>
  6.   <el-table
  7.     ref="multipleTable"
  8.     :data="tableData"
  9.     tooltip-effect="dark"
  10.     style="width: 100%"
  11.     @selection-change="handleSelectionChange">
  12.     <el-table-column
  13.       type="selection"
  14.       width="55">
  15.     </el-table-column>
  16.     <el-table-column
  17.       label="日期"
  18.       width="120">
  19.       <template slot-scope="scope">{{ scope.row.date }}</template>
  20.     </el-table-column>
  21.     <el-table-column
  22.       prop="name"
  23.       label="姓名"
  24.       width="120">
  25.     </el-table-column>
  26.     <el-table-column
  27.       prop="address"
  28.       label="地址"
  29.       show-overflow-tooltip>
  30.     </el-table-column>
  31.   </el-table>
  32.   <div style="margin-top: 20px">
  33.     <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
  34.     <el-button @click="toggleSelection()">取消选择</el-button>
  35.   </div>
  36. </template>
  37.  
  38. <script>
  39.   export default {
  40.     data() {
  41.       return {
  42.         tableData: [{
  43.           date: '2016-05-03',
  44.           name: '王小虎',
  45.           address: '上海市普陀区金沙江路 1518 弄'
  46.         }, {
  47.           date: '2016-05-02',
  48.           name: '王小虎',
  49.           address: '上海市普陀区金沙江路 1518 弄'
  50.         }, {
  51.           date: '2016-05-04',
  52.           name: '王小虎',
  53.           address: '上海市普陀区金沙江路 1518 弄'
  54.         }, {
  55.           date: '2016-05-01',
  56.           name: '王小虎',
  57.           address: '上海市普陀区金沙江路 1518 弄'
  58.         }, {
  59.           date: '2016-05-08',
  60.           name: '王小虎',
  61.           address: '上海市普陀区金沙江路 1518 弄'
  62.         }, {
  63.           date: '2016-05-06',
  64.           name: '王小虎',
  65.           address: '上海市普陀区金沙江路 1518 弄'
  66.         }, {
  67.           date: '2016-05-07',
  68.           name: '王小虎',
  69.           address: '上海市普陀区金沙江路 1518 弄'
  70.         }],
  71.         multipleSelection: []
  72.       }
  73.     },
  74.  
  75.     methods: {
  76.       toggleSelection(rows) {
  77.         if (rows) {
  78.           rows.forEach(row => {
  79.             this.$refs.multipleTable.toggleRowSelection(row);
  80.           });
  81.         } else {
  82.           this.$refs.multipleTable.clearSelection();
  83.         }
  84.       },
  85.       handleSelectionChange(val) {
  86.         this.multipleSelection = val;
  87.       }
  88.     }
  89.   }
  90. </script>

12.排序

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

  1. //在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 //Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。
  2.  
  3. <template>
  4.   <el-table
  5.     :data="tableData"
  6.     style="width: 100%"
  7.     :default-sort = "{prop: 'date', order: 'descending'}"
  8.     >
  9.     <el-table-column
  10.       prop="date"
  11.       label="日期"
  12.       sortable
  13.       width="180">
  14.     </el-table-column>
  15.     <el-table-column
  16.       prop="name"
  17.       label="姓名"
  18.       sortable
  19.       width="180">
  20.     </el-table-column>
  21.     <el-table-column
  22.       prop="address"
  23.       label="地址"
  24.       :formatter="formatter">
  25.     </el-table-column>
  26.   </el-table>
  27. </template>
  28.  
  29. <script>
  30.   export default {
  31.     data() {
  32.       return {
  33.         tableData: [{
  34.           date: '2016-05-02',
  35.           name: '王小虎',
  36.           address: '上海市普陀区金沙江路 1518 弄'
  37.         }, {
  38.           date: '2016-05-04',
  39.           name: '王小虎',
  40.           address: '上海市普陀区金沙江路 1517 弄'
  41.         }, {
  42.           date: '2016-05-01',
  43.           name: '王小虎',
  44.           address: '上海市普陀区金沙江路 1519 弄'
  45.         }, {
  46.           date: '2016-05-03',
  47.           name: '王小虎',
  48.           address: '上海市普陀区金沙江路 1516 弄'
  49.         }]
  50.       }
  51.     },
  52.     methods: {
  53.       formatter(row, column) {
  54.         return row.address;
  55.       }
  56.     }
  57.   }
  58. </script>

 13.筛选

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

  1. //在列中设置filtersfilter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。
  2.  
  3. <template>
  4.   <el-button @click="resetDateFilter">清除日期过滤器</el-button>
  5.   <el-button @click="clearFilter">清除所有过滤器</el-button>
  6.   <el-table
  7.     ref="filterTable"
  8.     :data="tableData"
  9.     style="width: 100%">
  10.     <el-table-column
  11.       prop="date"
  12.       label="日期"
  13.       sortable
  14.       width="180"
  15.       column-key="date"
  16.       :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'}]"
  17.       :filter-method="filterHandler"
  18.     >
  19.     </el-table-column>
  20.     <el-table-column
  21.       prop="name"
  22.       label="姓名"
  23.       width="180">
  24.     </el-table-column>
  25.     <el-table-column
  26.       prop="address"
  27.       label="地址"
  28.       :formatter="formatter">
  29.     </el-table-column>
  30.     <el-table-column
  31.       prop="tag"
  32.       label="标签"
  33.       width="100"
  34.       :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
  35.       :filter-method="filterTag"
  36.       filter-placement="bottom-end">
  37.       <template slot-scope="scope">
  38.         <el-tag
  39.           :type="scope.row.tag === '家' ? 'primary' : 'success'"
  40.           disable-transitions>{{scope.row.tag}}</el-tag>
  41.       </template>
  42.     </el-table-column>
  43.   </el-table>
  44. </template>
  45.  
  46. <script>
  47.   export default {
  48.     data() {
  49.       return {
  50.         tableData: [{
  51.           date: '2016-05-02',
  52.           name: '王小虎',
  53.           address: '上海市普陀区金沙江路 1518 弄',
  54.           tag: '家'
  55.         }, {
  56.           date: '2016-05-04',
  57.           name: '王小虎',
  58.           address: '上海市普陀区金沙江路 1517 弄',
  59.           tag: '公司'
  60.         }, {
  61.           date: '2016-05-01',
  62.           name: '王小虎',
  63.           address: '上海市普陀区金沙江路 1519 弄',
  64.           tag: '家'
  65.         }, {
  66.           date: '2016-05-03',
  67.           name: '王小虎',
  68.           address: '上海市普陀区金沙江路 1516 弄',
  69.           tag: '公司'
  70.         }]
  71.       }
  72.     },
  73.     methods: {
  74.       resetDateFilter() {
  75.         this.$refs.filterTable.clearFilter('date');
  76.       },
  77.       clearFilter() {
  78.         this.$refs.filterTable.clearFilter();
  79.       },
  80.       formatter(row, column) {
  81.         return row.address;
  82.       },
  83.       filterTag(value, row) {
  84.         return row.tag === value;
  85.       },
  86.       filterHandler(value, row, column) {
  87.         const property = column['property'];
  88.         return row[property] === value;
  89.       }
  90.     }
  91.   }
  92. </script>

14.自定义列模板

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

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

15.展开行

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

 

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

16.树形数据与懒加载

  1. //支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。
  2.  
  3. <template>
  4. <div>
  5.   <el-table
  6.     :data="tableData"
  7.     style="width: 100%;margin-bottom: 20px;"
  8.     row-key="id"
  9.     border
  10.     default-expand-all
  11.     :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  12.     <el-table-column
  13.       prop="date"
  14.       label="日期"
  15.       sortable
  16.       width="180">
  17.     </el-table-column>
  18.     <el-table-column
  19.       prop="name"
  20.       label="姓名"
  21.       sortable
  22.       width="180">
  23.     </el-table-column>
  24.     <el-table-column
  25.       prop="address"
  26.       label="地址">
  27.     </el-table-column>
  28.   </el-table>
  29.  
  30.   <el-table
  31.     :data="tableData1"
  32.     style="width: 100%"
  33.     row-key="id"
  34.     border
  35.     lazy
  36.     :load="load"
  37.     :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
  38.     <el-table-column
  39.       prop="date"
  40.       label="日期"
  41.       width="180">
  42.     </el-table-column>
  43.     <el-table-column
  44.       prop="name"
  45.       label="姓名"
  46.       width="180">
  47.     </el-table-column>
  48.     <el-table-column
  49.       prop="address"
  50.       label="地址">
  51.     </el-table-column>
  52.   </el-table>
  53. </div>
  54. </template>
  55. <script>
  56.   export default {
  57.     data() {
  58.       return {
  59.         tableData: [{
  60.           id: 1,
  61.           date: '2016-05-02',
  62.           name: '王小虎',
  63.           address: '上海市普陀区金沙江路 1518 弄'
  64.         }, {
  65.           id: 2,
  66.           date: '2016-05-04',
  67.           name: '王小虎',
  68.           address: '上海市普陀区金沙江路 1517 弄'
  69.         }, {
  70.           id: 3,
  71.           date: '2016-05-01',
  72.           name: '王小虎',
  73.           address: '上海市普陀区金沙江路 1519 弄',
  74.           children: [{
  75.               id: 31,
  76.               date: '2016-05-01',
  77.               name: '王小虎',
  78.               address: '上海市普陀区金沙江路 1519 弄'
  79.             }, {
  80.               id: 32,
  81.               date: '2016-05-01',
  82.               name: '王小虎',
  83.               address: '上海市普陀区金沙江路 1519 弄'
  84.           }]
  85.         }, {
  86.           id: 4,
  87.           date: '2016-05-03',
  88.           name: '王小虎',
  89.           address: '上海市普陀区金沙江路 1516 弄'
  90.         }],
  91.         tableData1: [{
  92.           id: 1,
  93.           date: '2016-05-02',
  94.           name: '王小虎',
  95.           address: '上海市普陀区金沙江路 1518 弄'
  96.         }, {
  97.           id: 2,
  98.           date: '2016-05-04',
  99.           name: '王小虎',
  100.           address: '上海市普陀区金沙江路 1517 弄'
  101.         }, {
  102.           id: 3,
  103.           date: '2016-05-01',
  104.           name: '王小虎',
  105.           address: '上海市普陀区金沙江路 1519 弄',
  106.           hasChildren: true
  107.         }, {
  108.           id: 4,
  109.           date: '2016-05-03',
  110.           name: '王小虎',
  111.           address: '上海市普陀区金沙江路 1516 弄'
  112.         }]
  113.       }
  114.     },
  115.     methods: {
  116.       load(tree, treeNode, resolve) {
  117.         setTimeout(() => {
  118.           resolve([
  119.             {
  120.               id: 31,
  121.               date: '2016-05-01',
  122.               name: '王小虎',
  123.               address: '上海市普陀区金沙江路 1519 弄'
  124.             }, {
  125.               id: 32,
  126.               date: '2016-05-01',
  127.               name: '王小虎',
  128.               address: '上海市普陀区金沙江路 1519 弄'
  129.             }
  130.           ])
  131.         }, 1000)
  132.       }
  133.     },
  134.   }
  135. </script>

17.自定义表头

表头支持自定义。

  1. //通过设置 Scoped slot 来自定义表头。
  2.  
  3. <template>
  4.   <el-table
  5.     :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
  6.     style="width: 100%">
  7.     <el-table-column
  8.       label="Date"
  9.       prop="date">
  10.     </el-table-column>
  11.     <el-table-column
  12.       label="Name"
  13.       prop="name">
  14.     </el-table-column>
  15.     <el-table-column
  16.       align="right">
  17.       <template slot="header" slot-scope="scope">
  18.         <el-input
  19.           v-model="search"
  20.           size="mini"
  21.           placeholder="输入关键字搜索"/>
  22.       </template>
  23.       <template slot-scope="scope">
  24.         <el-button
  25.           size="mini"
  26.           @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
  27.         <el-button
  28.           size="mini"
  29.           type="danger"
  30.           @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
  31.       </template>
  32.     </el-table-column>
  33.   </el-table>
  34. </template>
  35.  
  36. <script>
  37.   export default {
  38.     data() {
  39.       return {
  40.         tableData: [{
  41.           date: '2016-05-02',
  42.           name: '王小虎',
  43.           address: '上海市普陀区金沙江路 1518 弄'
  44.         }, {
  45.           date: '2016-05-04',
  46.           name: '王小虎',
  47.           address: '上海市普陀区金沙江路 1517 弄'
  48.         }, {
  49.           date: '2016-05-01',
  50.           name: '王小虎',
  51.           address: '上海市普陀区金沙江路 1519 弄'
  52.         }, {
  53.           date: '2016-05-03',
  54.           name: '王小虎',
  55.           address: '上海市普陀区金沙江路 1516 弄'
  56.         }],
  57.         search: ''
  58.       }
  59.     },
  60.     methods: {
  61.       handleEdit(index, row) {
  62.         console.log(index, row);
  63.       },
  64.       handleDelete(index, row) {
  65.         console.log(index, row);
  66.       }
  67.     },
  68.   }
  69. </script>

18. 表尾合计行

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

  1. //将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。
  2. <template>
  3.   <el-table
  4.     :data="tableData"
  5.     border
  6.     show-summary
  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="tableData"
  36.     border
  37.     height="200"
  38.     :summary-method="getSummaries"
  39.     show-summary
  40.     style="width: 100%; margin-top: 20px">
  41.     <el-table-column
  42.       prop="id"
  43.       label="ID"
  44.       width="180">
  45.     </el-table-column>
  46.     <el-table-column
  47.       prop="name"
  48.       label="姓名">
  49.     </el-table-column>
  50.     <el-table-column
  51.       prop="amount1"
  52.       label="数值 1（元）">
  53.     </el-table-column>
  54.     <el-table-column
  55.       prop="amount2"
  56.       label="数值 2（元）">
  57.     </el-table-column>
  58.     <el-table-column
  59.       prop="amount3"
  60.       label="数值 3（元）">
  61.     </el-table-column>
  62.   </el-table>
  63. </template>
  64.  
  65. <script>
  66.   export default {
  67.     data() {
  68.       return {
  69.         tableData: [{
  70.           id: '12987122',
  71.           name: '王小虎',
  72.           amount1: '234',
  73.           amount2: '3.2',
  74.           amount3: 10
  75.         }, {
  76.           id: '12987123',
  77.           name: '王小虎',
  78.           amount1: '165',
  79.           amount2: '4.43',
  80.           amount3: 12
  81.         }, {
  82.           id: '12987124',
  83.           name: '王小虎',
  84.           amount1: '324',
  85.           amount2: '1.9',
  86.           amount3: 9
  87.         }, {
  88.           id: '12987125',
  89.           name: '王小虎',
  90.           amount1: '621',
  91.           amount2: '2.2',
  92.           amount3: 17
  93.         }, {
  94.           id: '12987126',
  95.           name: '王小虎',
  96.           amount1: '539',
  97.           amount2: '4.1',
  98.           amount3: 15
  99.         }]
  100.       };
  101.     },
  102.     methods: {
  103.       getSummaries(param) {
  104.         const { columns, data } = param;
  105.         const sums = [];
  106.         columns.forEach((column, index) => {
  107.           if (index === 0) {
  108.             sums[index] = '总价';
  109.             return;
  110.           }
  111.           const values = data.map(item => Number(item[column.property]));
  112.           if (!values.every(value => isNaN(value))) {
  113.             sums[index] = values.reduce((prev, curr) => {
  114.               const value = Number(curr);
  115.               if (!isNaN(value)) {
  116.                 return prev + curr;
  117.               } else {
  118.                 return prev;
  119.               }
  120.             }, 0);
  121.             sums[index] += ' 元';
  122.           } else {
  123.             sums[index] = 'N/A';
  124.           }
  125.         });
  126.  
  127.         return sums;
  128.       }
  129.     }
  130.   };
  131. </script>

19.合并行或列

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

 

  1. //通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
  2.  
  3. <template>
  4.   <div>
  5.     <el-table
  6.       :data="tableData"
  7.       :span-method="arraySpanMethod"
  8.       border
  9.       style="width: 100%">
  10.       <el-table-column
  11.         prop="id"
  12.         label="ID"
  13.         width="180">
  14.       </el-table-column>
  15.       <el-table-column
  16.         prop="name"
  17.         label="姓名">
  18.       </el-table-column>
  19.       <el-table-column
  20.         prop="amount1"
  21.         sortable
  22.         label="数值 1">
  23.       </el-table-column>
  24.       <el-table-column
  25.         prop="amount2"
  26.         sortable
  27.         label="数值 2">
  28.       </el-table-column>
  29.       <el-table-column
  30.         prop="amount3"
  31.         sortable
  32.         label="数值 3">
  33.       </el-table-column>
  34.     </el-table>
  35.  
  36.     <el-table
  37.       :data="tableData"
  38.       :span-method="objectSpanMethod"
  39.       border
  40.       style="width: 100%; margin-top: 20px">
  41.       <el-table-column
  42.         prop="id"
  43.         label="ID"
  44.         width="180">
  45.       </el-table-column>
  46.       <el-table-column
  47.         prop="name"
  48.         label="姓名">
  49.       </el-table-column>
  50.       <el-table-column
  51.         prop="amount1"
  52.         label="数值 1（元）">
  53.       </el-table-column>
  54.       <el-table-column
  55.         prop="amount2"
  56.         label="数值 2（元）">
  57.       </el-table-column>
  58.       <el-table-column
  59.         prop="amount3"
  60.         label="数值 3（元）">
  61.       </el-table-column>
  62.     </el-table>
  63.   </div>
  64. </template>
  65.  
  66. <script>
  67.   export default {
  68.     data() {
  69.       return {
  70.         tableData: [{
  71.           id: '12987122',
  72.           name: '王小虎',
  73.           amount1: '234',
  74.           amount2: '3.2',
  75.           amount3: 10
  76.         }, {
  77.           id: '12987123',
  78.           name: '王小虎',
  79.           amount1: '165',
  80.           amount2: '4.43',
  81.           amount3: 12
  82.         }, {
  83.           id: '12987124',
  84.           name: '王小虎',
  85.           amount1: '324',
  86.           amount2: '1.9',
  87.           amount3: 9
  88.         }, {
  89.           id: '12987125',
  90.           name: '王小虎',
  91.           amount1: '621',
  92.           amount2: '2.2',
  93.           amount3: 17
  94.         }, {
  95.           id: '12987126',
  96.           name: '王小虎',
  97.           amount1: '539',
  98.           amount2: '4.1',
  99.           amount3: 15
  100.         }]
  101.       };
  102.     },
  103.     methods: {
  104.       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  105.         if (rowIndex % 2 === 0) {
  106.           if (columnIndex === 0) {
  107.             return [1, 2];
  108.           } else if (columnIndex === 1) {
  109.             return [0, 0];
  110.           }
  111.         }
  112.       },
  113.  
  114.       objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  115.         if (columnIndex === 0) {
  116.           if (rowIndex % 2 === 0) {
  117.             return {
  118.               rowspan: 2,
  119.               colspan: 1
  120.             };
  121.           } else {
  122.             return {
  123.               rowspan: 0,
  124.               colspan: 0
  125.             };
  126.           }
  127.         }
  128.       }
  129.     }
  130.   };
  131. </script>

20.自定义索引

自定义 type=index 列的行号。

  1. //通过给 type=index 的列传入 index 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 0 开始）作为参数，返回值将作为索引展示。
  2.  
  3. <template>
  4.   <el-table
  5.     :data="tableData"
  6.     style="width: 100%">
  7.     <el-table-column
  8.       type="index"
  9.       :index="indexMethod">
  10.     </el-table-column>
  11.     <el-table-column
  12.       prop="date"
  13.       label="日期"
  14.       width="180">
  15.     </el-table-column>
  16.     <el-table-column
  17.       prop="name"
  18.       label="姓名"
  19.       width="180">
  20.     </el-table-column>
  21.     <el-table-column
  22.       prop="address"
  23.       label="地址">
  24.     </el-table-column>
  25.   </el-table>
  26. </template>
  27.  
  28. <script>
  29.   export default {
  30.     data() {
  31.       return {
  32.         tableData: [{
  33.           date: '2016-05-02',
  34.           name: '王小虎',
  35.           province: '上海',
  36.           city: '普陀区',
  37.           address: '上海市普陀区金沙江路 1518 弄',
  38.           zip: 200333,
  39.           tag: '家'
  40.         }, {
  41.           date: '2016-05-04',
  42.           name: '王小虎',
  43.           province: '上海',
  44.           city: '普陀区',
  45.           address: '上海市普陀区金沙江路 1517 弄',
  46.           zip: 200333,
  47.           tag: '公司'
  48.         }, {
  49.           date: '2016-05-03',
  50.           name: '王小虎',
  51.           province: '上海',
  52.           city: '普陀区',
  53.           address: '上海市普陀区金沙江路 1516 弄',
  54.           zip: 200333,
  55.           tag: '公司'
  56.         }],
  57.       }
  58.     },
  59.     methods: {
  60.       indexMethod(index) {
  61.         return index * 2;
  62.       }
  63.     }
  64.   };
  65. </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/621585
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号