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

Element组件-Table 表格_element table

作者：2023面试高手 | 2024-04-06 14:14:33

赞

踩

element table

目录

基础表格

带边框表格

多级表头

固定表头

固定列

固定列和表头

单选

列里面遍历数据并进行三元表达式判断

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

基础表格

基础的表格展示用法：

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

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

带边框表格

 默认情况下，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>

 多级表头

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

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

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

固定表头

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

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

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

固定列

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

 固定列需要使用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>

固定列和表头

横纵内容过多时，可选择固定列和表头。固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

单选

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

 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>

列里面遍历数据并进行三元表达式判断

  1. <el-table-column label="优先购标签" >
  2.     <template v-slot="scope">
  3.         {{scope.row.preemption === 1 ? '开启' : '关闭'}}
  4.     </template>
  5. </el-table-column>

  1. <el-table-column prop="userCommissionInfo" label="交易手续费">
  2.     <template slot-scope="scope">
  3.         <div>一级手续费:{{ scope.row.userCommissionInfo ? scope.row.userCommissionInfo.oneProportion+'%' : ''}}</div>
  4.         <div>二级手续费:{{ scope.row.userCommissionInfo ? scope.row.userCommissionInfo.twoProportion+'%' : ''}}</div>
  5.         <div>转赠手续费:{{ scope.row.userCommissionInfo ? scope.row.userCommissionInfo.giveProportion+'%' : ''}}</div>
  6.     </template>
  7. </el-table-column>

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

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

  

闽ICP备14008679号