el-table 行固定

最新推荐文章于 2024-08-06 17:53:41 发布

像大像一样前进

最新推荐文章于 2024-08-06 17:53:41 发布

阅读量2.3k

点赞数 1

分类专栏： js vue element 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/w211312343/article/details/126564680

版权

本文介绍了在Element-UI的el-table组件中如何实现行固定的解决方案。面对产品经理提出的在表格底部显示固定统计行的需求，作者通过研究el-table的结构，利用CSS的position: sticky属性成功实现了这一功能。

摘要由CSDN通过智能技术生成

element-ui中表格只有固定表头以及列的方法，文档上也没有写怎么固定行
上午产品经理来了个需求说要在表格地底部展示统计行，这行数据要固定
于是我看了el-table的结构，于是想用css 来实现； position: sticky;就是这个属性，完美解决
请添加图片描述

下面是代码

<template>
  <div class="category">
    <h2>category</h2>
    <el-table
      :data="tableData"
      style="width: 100%"
      height="250"
      :row-class-name="rowClass"
      class="tableStyle"
    >
      <el-table-column prop="date" label="Date" width="150" />
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column prop="state" label="State" width="120" />
      <el-table-column prop="city" label="City" width="320" /