devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Element】表格 el-table

作者：凡人多烦事01 | 2024-04-15 06:52:55

赞

踩

el-table

目录

ElementUI

表格分页（每页20条）

表格分页（全部数据）

表格排序（全部数据）

表格排序（默认）

两个el-table冲突

加载数据前显示“ 暂无数据 ”

表格项为路由

表头样式

树形表格

点击表格单行

人数统计表（多级表头、合并行或列）

ElementUI

表格分页（每页20条）

  1. <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" tooltip-effect="dark">
  2.   <!-- 复选框 -->
  3.   <el-table-column type="selection"> </el-table-column>
  4.   <!-- 序号 -->
  5.   <el-table-column type="index" label="序号" width="70"></el-table-column>
  6.   <!-- 名称很长显示悬浮窗 -->
  7.   <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
  8.   <!-- 自定义参数类型 -->
  9.   <el-table-column label="类型">
  10.     <template slot-scope="scope">
  11.       <div v-if="scope.row.type === 1">小程序</div>
  12.       <div v-else-if="scope.row.type === 2">后台</div>
  13.       <div v-else>全部</div>
  14.     </template>
  15.   </el-table-column>
  16.    <!-- 操作 -->
  17.   <el-table-column label="操作" width="220">
  18.     <template slot-scope="scope">
  19.       <el-button size="small" @click="edit(scope.row,scope.$index)" type="primary">编辑</el-button>
  20.       <el-button size="small" @click="remove(scope.row,scope.$index)" type="danger">删除</el-button>
  21.     </template>
  22.   </el-table-column>
  23. </el-table>
  24.  
  25. <!-- 分页 -->
  26. <div class="pagination">
  27.   <el-pagination
  28.     background
  29.     layout="total,prev,pager,next,sizes,jumper"
  30.     :total="total"
  31.     :page-sizes="[10, 20, 30, 50]"
  32.     :page-size="pageSize"
  33.     :current-page.sync="pageNum"
  34.     @size-change="handleSizeChange"
  35.     @current-change="handleCurrentChange"
  36.   >
  37.   </el-pagination>
  38. </div>

表格单元格内容过多，使用文字提示。超出一行省略号。悬浮展示所有内容。

show-overflow-tooltip

tooltip-effect="dark"

 操作的时候获取当前行和当前行的下标

scope.row

scope.$index

  1. data() {
  2.   return {
  3.     // 复选框所选中信息
  4.     selection: [],
  5.     selectStr: "",
  6.  
  7.     // 表格数据
  8.     tableData: [],
  9.  
  10.     // 总条数
  11.     total: 0,
  12.  
  13.     // 页面条数
  14.     pageSize: 20,
  15.  
  16.     // 页码
  17.     pageNum: 1,
  18.   };
  19. },
  1. created() {
  2.   this.getList();
  3. },
  4.  
  5. // 获取列表数据
  6. async getList(pageNum, pageSize) {
  7.   const res = await getIntegralRecord({
  8.     pageNum,
  9.     pageSize,
  10.   });
  11.   this.tableData = res.data.list;
  12.   this.total = res.data.total;
  13. },
  14.  
  15. // 数量回调
  16. handleSizeChange(e) {
  17.   this.pageSize = e;
  18.   this.getList();
  19. },
  20.  
  21. // 页码回调
  22. handleCurrentChange(e) {
  23.   this.pageNum = e;
  24.   this.getList();
  25. },
  26. // 复选框回调
  27. handleSelectionChange(val) {
  28.   this.selection = val;
  29.   this.selectStr = val.map(function (e) {return e.id}).join(",");
  30. },

表格分页（全部数据）

每页5条

每页10条

  1. <el-table
  2.   v-loading="loading"
  3.   :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
  4.   style="width: 100%;"
  5. >
  6.   <el-table-column label="序号" type="index" align="center">
  7.     <template slot-scope="scope">
  8.       <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
  9.     </template>
  10.   </el-table-column>
  11.   <el-table-column label="编号" align="center" prop="id"  />
  12. </el-table>
  13.  
  14. <el-pagination
  15.   :current-page="pageNum"
  16.   :page-size="pageSize"
  17.   :page-sizes="[5, 10, 20, 30, 50]"
  18.   :pager-count="5"
  19.   :total="total"
  20.   layout="total, sizes, prev, pager, next, jumper"
  21.   @size-change="handleSizeChange"
  22.   @current-change="handleCurrentChange"
  23. />
  1. data() {
  2.   return {
  3.     loading: true,
  4.     total: 0,
  5.     pageNum: 1,
  6.     pageSize: 10,
  7.     list: []
  8.   };
  9. },
  1. created() {
  2.   this.getList();
  3. },
  4. methods: {
  5.  
  6.   handleSizeChange(val) {
  7.     this.pageSize = val
  8.     if (this.pageNum * val > this.total) {
  9.       this.pageNum = 1
  10.     }
  11.     this.getList()
  12.   },
  13.  
  14.   handleCurrentChange(val) {
  15.     this.pageNum = val
  16.     this.getList()
  17.   },
  18.  
  19.   getList() {
  20.     this.loading = true;
  21.     list({}).then(response => {
  22.       this.list = [
  23.         {id: 1},
  24.         {id: 2},
  25.         {id: 3},
  26.         {id: 4},
  27.         {id: 5},
  28.         {id: 6},
  29.         {id: 7},
  30.         {id: 8},
  31.         {id: 9},
  32.         {id: 10},
  33.         {id: 11},
  34.       ];
  35.       this.total = 11;
  36.       this.loading = false;
  37.     });
  38.   },
  39. }

表格排序（全部数据）

单项排序

@sort-change="sortChange"

sortable='custom'

  1. <el-table
  2.   v-loading="loading"
  3.   :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
  4.   style="width: 100%;"
  5.   @sort-change="sortChange"
  6. >
  7.   <el-table-column label="序号" type="index" align="center">
  8.     <template slot-scope="scope">
  9.       <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
  10.     </template>
  11.   </el-table-column>
  12.   <el-table-column label="编号" align="center" prop="id" sortable='custom' />
  13. </el-table>
  1. data() {
  2.   return {
  3.     list: [],
  4.   };
  5. },
  1. created() {
  2.   this.getList();
  3. },
  4. methods: {
  5.   sortChange(column){
  6.     this.pageNum = 1
  7.     
  8.     if(column.order === 'ascending'){ // 降序
  9.       this.list.sort(this.ascSortFun)
  10.     }else if(column.order === 'descending'){ // 升序
  11.       this.list.sort(this.desSortFun)
  12.     }else{
  13.       this.getList()
  14.     }
  15.   },
  16.  
  17.   //升序
  18.   ascSortFun(a, b) {
  19.     if (a.id > b.id) return 1;
  20.     if (a.id == b.id) return 0;
  21.     if (a.id < b.id) return -1;
  22.   },
  23.  
  24.   //降序
  25.   desSortFun(a,b){
  26.     if (a.id > b.id) return -1;
  27.     if (a.id == b.id) return 0;
  28.     if (a.id < b.id) return 1;
  29.   },
  30.   
  31.   getList() {
  32.     this.loading = true;
  33.     list({}).then(response => {
  34.       this.list = [
  35.         {id: 1},
  36.         {id: 2},
  37.         {id: 3},
  38.         {id: 4},
  39.         {id: 5},
  40.         {id: 6},
  41.         {id: 7},
  42.         {id: 8},
  43.         {id: 9},
  44.         {id: 10},
  45.         {id: 11},
  46.       ];
  47.       this.total = 11;
  48.       this.loading = false;
  49.     });
  50.   },
  51. }

多项排序

  1. <el-table
  2.   v-loading="loading"
  3.   :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
  4.   style="width: 100%;"
  5.   @sort-change="sortChange"
  6. >
  7.   <el-table-column label="序号" type="index" align="center">
  8.     <template slot-scope="scope">
  9.       <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
  10.     </template>
  11.   </el-table-column>
  12.   <el-table-column label="编号" align="center" prop="id" sortable='custom' />
  13.   <el-table-column label="时间" align="center" prop="time" sortable='custom' />
  14. </el-table>
  1. data() {
  2.   return {
  3.     prop: "",
  4.     list: [],
  5.   };
  6. },
  1. created() {
  2.   this.getList();
  3. },
  4. methods: {
  5.   sortChange(column){
  6.     this.pageNum = 1
  7.     this.prop = column.prop
  8.  
  9.     if(column.order === 'ascending'){ // 降序
  10.       this.list.sort(this.ascSortFun)
  11.     }else if(column.order === 'descending'){ // 升序
  12.       this.list.sort(this.desSortFun)
  13.     }else{
  14.       this.getList()
  15.     }
  16.   },
  17.  
  18.   //升序
  19.   ascSortFun(a, b) {
  20.     if (a[this.prop] > b[this.prop]) return 1;
  21.     if (a[this.prop] == b[this.prop]) return 0;
  22.     if (a[this.prop] < b[this.prop]) return -1;
  23.   },
  24.  
  25.   //降序
  26.   desSortFun(a,b){
  27.     if (a[this.prop] > b[this.prop]) return -1;
  28.     if (a[this.prop] == b[this.prop]) return 0;
  29.     if (a[this.prop] < b[this.prop]) return 1;
  30.   },
  31.   
  32.   getList() {
  33.     this.loading = true;
  34.     list({}).then(response => {
  35.       this.list = [
  36.         {id: 1,time: '11-02'},
  37.         {id: 2,time: '11-03'},
  38.         {id: 3,time: '11-05'},
  39.         {id: 4,time: '11-04'},
  40.         {id: 5,time: '11-02'},
  41.         {id: 6,time: '11-04'},
  42.         {id: 7,time: '11-03'},
  43.         {id: 8,time: '11-04'},
  44.         {id: 9,time: '11-11'},
  45.         {id: 10,time: '11-03'},
  46.         {id: 11,time: '11-01'},
  47.       ];
  48.       this.total = 11;
  49.       this.loading = false;
  50.     });
  51.   },
  52. }

表格排序（默认）

  1. <el-table
  2.   ref="table"
  3.   v-loading="loading"
  4.   :data="list.slice((pageNum-1)*pageSize,pageNum*pageSize)"
  5.   style="width: 100%;"
  6.   :default-sort="defaultSort"
  7.   @sort-change="sortChange"
  8. >
  9.   <el-table-column label="序号" type="index" align="center">
  10.     <template slot-scope="scope">
  11.       <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
  12.     </template>
  13.   </el-table-column>
  14.   <el-table-column label="编号" align="center" prop="id" sortable='custom' />
  15.   <el-table-column label="时间" align="center" prop="time" sortable='custom' />
  16. </el-table>
  1. data() {
  2.   return {
  3.     defaultSort: {prop: 'time', order: 'descending'},
  4.     list: [],
  5.   };
  6. },

 重置成默认值

  1. reset() {
  2.   this.$refs.table.sort(this.defaultSort.prop, this.defaultSort.order)
  3. },

两个el-table冲突

设置两个不同的key就解决问题啦

  1. <el-table :data="tableData" key="1"></el-table>
  2. <el-table :data="tableData2" key="2"></el-table>

加载数据前显示“ 暂无数据 ”

  1. <el-table :data="tableData" style="width: 100%">    
  2.   <template slot="empty">
  3.     <p>{{empty}}</p>
  4.   </template>
  5. </el-table> 
  1. data: {
  2.     return： {
  3.         tableData: [],
  4.         text: ''
  5.     }
  6. }
  1. created() {
  2.   getTableData({}).then(res => {
  3.     if(res.code == 200) {
  4.       this.tableData = res.data
  5.       this.text = this.tableData.length > 0 ? '暂无数据' : ''
  6.     }
  7.   });
  8. },

表格项为路由

  1. <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
  2.   <template slot-scope="scope">
  3.     <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
  4.       <span>{{ scope.row.dictType }}</span>
  5.     </router-link>
  6.   </template>
  7. </el-table-column>

表头样式

class和style的两种写法

  1. <el-table  
  2.   :data="tableData"  
  3.   header-cell-class-name="tableStyle"
  4.   :header-cell-class-name="headerStyle"
  5.  
  6.   :header-cell-style='tableHeaderStyle' 
  7.   :header-cell-style="{
  8.     'background-color': '#1989fa',
  9.     'color': '#fff',
  10.     'font-weight': '400'
  11.   }"
  12. ></el-table>
  1. headerStyle ({row, column, rowIndex, columnIndex}) {
  2.     return 'tableStyle'
  3. },
  4. tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
  5.     return 'background-color:#1989fa;color:#fff;font-weight:400;'
  6. }

树形表格

  1. <el-button @click="toggleExpandAll">展开/折叠</el-button>
  2.  
  3. <el-table
  4.   v-if="refreshTable"
  5.   :data="list"
  6.   row-key="id"
  7.   :default-expand-all="isExpandAll"
  8.   :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  9. >
  10.   <el-table-column prop="name" label="名称"></el-table-column>
  11. </el-table>
  1. data() {
  2.   return {
  3.     refreshTable: true,
  4.  
  5.     isExpandAll: true,
  6.  
  7.     list:[
  8.       {
  9.         id: 1,
  10.         name: '1',
  11.         
  12.         children: [
  13.           {
  14.             id: 11,
  15.             name: '11',
  16.             children: [
  17.               {
  18.                 id: 111,
  19.                 name: '111',
  20.               }
  21.             ]
  22.           },
  23.           {
  24.             id: 12,
  25.             name: '12',
  26.           },
  27.         ]
  28.       },
  29.       {
  30.         id: 2,
  31.         name: '2',
  32.         children: [
  33.           {
  34.             id: 21,
  35.             name: '21'
  36.           },
  37.           {
  38.             id: 22,
  39.             name: '22'
  40.           },
  41.         ]
  42.       }
  43.     ]
  44.  
  45.   };
  46. },

展开折叠操作

  1. toggleExpandAll() {
  2.   this.refreshTable = false;
  3.   this.isExpandAll = !this.isExpandAll;
  4.   this.$nextTick(() => {
  5.     this.refreshTable = true;
  6.   });
  7. },

点击表格单行

row-key：行数据的Key

  1. <el-table 
  2.   ref="table"
  3.   v-loading="loading" 
  4.   :data="tableData"
  5.   :row-key="getRowKey" 
  6.   @row-click="clickRow" 
  7.   @selection-change="handleSelectionChange" 
  8. >
  9. </el-table>
  1. // 单击选中行数据
  2. clickRow(row) {
  3.   this.$refs.table.toggleRowSelection(row);
  4. },
  5. // 多选框选中数据
  6. handleSelectionChange(selection) {
  7.   this.ids = selection.map((item) => item.id);
  8. },
  9. // 保存选中的数据编号
  10. getRowKey(row) {
  11.   return row.id;
  12. },

选中多页数据

默认情况下，

全选第一页

切换到第二页，选中的值被清空了。 

  1. <el-table v-loading="loading" :data="managerList" @selection-change="handleSelectionChange">
  2.   <el-table-column type="selection" width="55" align="center" fixed="left"/>
  3.   <el-table-column label="名称" align="center" prop="deviceName">
  4.     <template slot-scope="scope">名称</template>
  5.   </el-table-column>
  6. </el-table>
  1. handleSelectionChange(selection) {
  2.   console.log(selection)
  3. },

提出解决方法，让第二页的数据可以选中。

  1. <el-table v-loading="loading" :data="managerList" @selection-change="handleSelectionChange" :row-key="getRowKeys">
  2.   <el-table-column type="selection" width="55" align="center" fixed="left" :reserve-selection="true"/>
  3.   <el-table-column label="名称" align="center" prop="deviceName">
  4.     <template slot-scope="scope">名称</template>
  5.   </el-table-column>
  6. </el-table>
  1. getRowKeys(row) {
  2.   return row.id
  3. },
  4.  
  5. handleSelectionChange(selection) {
  6.   console.log(selection)
  7. },

人数统计表（多级表头、合并行或列）

  1. <el-table
  2.   :data="school_table"
  3.   style="width: 100%;margin-top: 20px;"
  4.   :span-method="spanMethod"
  5. >
  6.   <el-table-column
  7.     align="center"
  8.     prop="name"
  9.     label="名称"
  10.     width="150">
  11.   </el-table-column>
  12.   <el-table-column align="center" :label="item.name" v-for="(item,index) in class_list" :key="index">
  13.     <el-table-column
  14.       align="center"
  15.       label="男"
  16.       width="120">
  17.       <template slot-scope="scope">
  18.         <div v-for="(v,k) in scope.row.data" :key="k" v-show="v.classId == item.id">
  19.           <el-input-number style="width: 100%;" v-model="v.man" :controls="false"></el-input-number>
  20.         </div>
  21.       </template>
  22.     </el-table-column>
  23.     
  24.     <el-table-column
  25.       align="center"
  26.       prop="name"
  27.       label="女"
  28.       width="120">
  29.       <template slot-scope="scope">
  30.         <div v-for="(v,k) in scope.row.data" :key="k" v-show="v.classId == item.id">
  31.           <el-input-number style="width: 100%;" v-model="v.woman" :controls="false"></el-input-number>
  32.         </div>
  33.       </template>
  34.     </el-table-column>
  35.   </el-table-column>
  36.  
  37.   <el-table-column
  38.     align="center"
  39.     prop="total"
  40.     label="合计">
  41.   </el-table-column>
  42. </el-table>
  1. school_table: [
  2.   {
  3.     id: 1,
  4.     name: '1小学',
  5.     total: 1,
  6.     data:[
  7.       {classId:1, man:1, woman:2},
  8.       {classId:2, man:3, woman:4},
  9.     ],
  10.     
  11.   },
  12.   {
  13.     id: 2,
  14.     name: '2小学',
  15.     data:[
  16.       {classId:1, man:7, woman:8},
  17.       {classId:2, man:9, woman:10},
  18.     ],
  19.   }
  20. ],
  21. school_list: [
  22.   {
  23.     id: 1,
  24.     name:'1小学'
  25.   },
  26.   {
  27.     id: 2,
  28.     name:'2小学'
  29.   },
  30. ],
  31. class_list:[
  32.   {
  33.     id: 1,
  34.     name:'一年级'
  35.   },
  36.   {
  37.     id: 2,
  38.     name:'二年级'
  39.   }
  40. ]

文字提示超出屏幕（show-overflow-tootip ）

解决方法

  1. <style>
  2. .el-tooltip__popper {
  3.     width: 250px;
  4. }
  5. </style>

弹出框（el-popover）

  1. <el-table ref="dataTable" v-loading="loading" :data="managerList" @selection-change="handleSelectionChange">
  2.   <el-table-column type="selection" width="55" align="center"/>
  3.   <el-table-column label="名称" align="center" prop="createTime">
  4.     <template slot-scope="scope">
  5.       <el-popover 
  6.         placement="top-end"
  7.         width="100"
  8.         trigger="hover"
  9.       >
  10.         哈哈哈哈啊哈哈哈哈啊哈哈哈哈啊哈哈哈
  11.         <span slot="reference">名称</span>
  12.       </el-popover> 
  13.     </template>
  14.   </el-table-column>
  15. </el-table>

复选框偏移，有小黑点

当宽度小于30的时候会出现向左偏移问题

  1. <el-table-column
  2.   type="selection"
  3.   width="25"> 
  4. </el-table-column>

复选框禁用

  1. <el-table v-loading="loading" :data="managerList" @selection-change="handleSelectionChange">
  2.   <el-table-column type="selection" width="55" align="center" :selectable="selectMethod"/>
  3.   <el-table-column label="名称" align="center" prop="createTime"></el-table-column>
  4. </el-table>
  1. selectMethod(row) {
  2.   console.log(row)
  3.   return row.createTime == '2023-08-17 15:33:27' // 创建时间为 2023-08-17 15:33:27 可以被选
  4. },

 可以选中的规则

:selectable="selectMethod"

复选框默认选中

  1. <el-table ref="dataTable" :data="managerList" @selection-change="handleSelectionChange">
  2.   <el-table-column type="selection" width="55" align="center"/>
  3.   <el-table-column label="名称" align="center" prop="createTime"></el-table-column>
  4. </el-table>
  1. getList() {
  2.   this.loading = true
  3.   getTableList().then(response => {
  4.     this.list = response.rows
  5.     this.list.forEach(element => {
  6.       this.$nextTick(() => {
  7.         if (element.createTime == '2023-08-17 15:33:27') {
  8.           this.$refs.dataTable.toggleRowSelection(element, true)
  9.         }
  10.       })
  11.     });
  12.     this.total = response.total
  13.     this.loading = false
  14.   });
  15. },

设置选中项 

this.$refs.dataTable.toggleRowSelection(element, true)

动态添加列 

新增之后

  1. <el-button type="primary" @click="addCol"> 新增列</el-button>
  2. <el-table :data="list">
  3.   <el-table-column prop="paramName" :label="item" v-for="(item,index) in date" :key="index">
  4.     <template slot-scope="scope">{{ scope.row[item] }}</template>
  5.   </el-table-column>
  6. </el-table>
  1. list: [
  2.   {
  3.     '年': '2023',
  4.     '月': '01',
  5.     '日': '01',
  6.     '时': '01',
  7.     '分': '01',
  8.     '秒': '01'
  9.   },
  10.   {
  11.     '年': '2023',
  12.     '月': '02',
  13.     '日': '02',
  14.     '时': '02',
  15.     '分': '02',
  16.     '秒': '02'
  17.   }
  18. ],
  19. date: ['年', '月', '日']
  1. addCol() {
  2.   this.date.push('时')
  3. },

动态添加列导致表格闪烁

方法一：官方提供的方法

新增列后，重新计算单元格高度和宽度渲染到页面，从而发生闪烁。

  1. beforeUpdate(){
  2.   this.$nextTick(() => { //在数据加载完，重新渲染表格
  3.     this.$refs['table'].doLayout();
  4.   })
  5. }

方法二：设置独一无二的key

  1. <el-button type="primary" @click="addCol"> 新增列</el-button>
  2. <el-table :data="list" :key="date">
  3.   <el-table-column prop="paramName" :label="item" v-for="(item,index) in date" :key="index">
  4.     <template slot-scope="scope">{{ scope.row[item] }}</template>
  5.   </el-table-column>
  6. </el-table>
  1. list: [
  2.   {
  3.     '年': '2023',
  4.     '月': '01',
  5.     '日': '01',
  6.     '时': '01',
  7.     '分': '01',
  8.     '秒': '01'
  9.   },
  10.   {
  11.     '年': '2023',
  12.     '月': '02',
  13.     '日': '02',
  14.     '时': '02',
  15.     '分': '02',
  16.     '秒': '02'
  17.   }
  18. ],
  19. date: ['年', '月', '日']
  20.  
  21. ​

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

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

  

闽ICP备14008679号