首页  > 综合 > 正文

el-table合计行在滚动条下方的问题

投稿作者：大河 2024-12-24 09:15:12 5

el-table中设置了show-summary会出现合计栏，因为表格列比较多，会导致滚动条在合计栏的上面，需要对css进行调整。

解决方法：

要将整个table滚动，不是只对表格内容区域滚动，所以将表头、表内容、表尾的滚动条设为visible。因此需要在el-table外面再套一个盒子，让整个table有滚动条。 需要另外写一个标签，不要加scoped属性，否则不生效。

 <div class="container">
    <el-table :data="tableData" border :summary-method="getSummaries" show-summary>
    
    el-table>
  div>

实现效果如下，但是整个表格进行拖动的时候，会导致表格列el-table-column的fixed属性失效。

如果要实现滚动条在合计行下方，同时兼容fixed属性，经过多番查找，终于找到了一篇博客确实可以实现需求，整合了一下代码如下：


<script>
import { throttle } from "throttle-debounce";
export default {
  data() {
    return {
      tableData: [],
      headerList: [],
    };
  },
  computed: {
    bodyWrapper() {
      return this.$refs.elTable.$refs.bodyWrapper;
    },
    footerWrapper() {
      return this.$refs.elTable.$refs.footerWrapper;
    },
    fixedWrapper() {
      return this.$refs.elTable.$refs.fixedWrapper;
    },
    elTableRefs() {
      return this.$refs.elTable.$refs;
    },
  },
  destroyed() {
    // 退出时去除自定义scroll事件
    this.unbindEvents();
  },
  mounted() {
    this.getList();
    this.$nextTick(() => {
      // 样式调整,fixed布局下fixed列的高度会有偏差
      let fixedWrapper = this.$refs.elTable.$refs.fixedWrapper
        ? this.$refs.elTable.$refs.fixedWrapper
        : "";
      let rightFixedWrapper = this.$refs.elTable.$refs.rightFixedWrapper
        ? this.$refs.elTable.$refs.rightFixedWrapper
        : "";
      fixedWrapper &&
        (fixedWrapper.style.maxHeight = this.$refs.elTable.layout.viewportHeight
          ? this.$refs.elTable.layout.viewportHeight + "px"
          : "");
      rightFixedWrapper &&
        (rightFixedWrapper.style.maxHeight = this.$refs.elTable.layout
          .viewportHeight
          ? this.$refs.elTable.layout.viewportHeight + "px"
          : "");
    });
    // 自定义scroll事件
    this.bindEvents();
    // 去除原本的scroll事件
    this.$refs.elTable.unbindEvents();
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "科目人数汇总";
          return;
        }
        const values = data.map((item) => {
          const sameObj = item.options.find(
            (val) => val.label === columns[index].label
          );
          return sameObj ? Number(sameObj.num) : 0;
        });
        if (
          !values.every((value) => isNaN(value)) &&
          column.property !== "sum"
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = "";
        }
      });
      return sums;
    },
    getList() {
      this.tableData = [
        {
          id: 1,
          grade: "高一（1）",
          options: [
            { label: "语文", num: 200 },
            { label: "数学", num: 200 },
            { label: "英语", num: 200 },
            { label: "物理", num: 150 },
            { label: "历史", num: 80 },
            { label: "历史2", num: 80 },
            { label: "历史3", num: 80 },
            { label: "历史4", num: 80 },
            { label: "历史5", num: 80 },
            { label: "历史6", num: 80 },
            { label: "历史7", num: 80 },
            { label: "历史8", num: 80 },
          ],
        },
        {
          id: 1,
          grade: "高一（2）",
          options: [
            { label: "语文", num: 150 },
            { label: "数学", num: 150 },
            { label: "英语", num: 150 },
            { label: "物理", num: 70 },
            { label: "历史", num: 50 },
            { label: "历史2", num: 80 },
            { label: "历史3", num: 80 },
            { label: "历史4", num: 80 },
            { label: "历史5", num: 80 },
            { label: "历史6", num: 80 },
            { label: "历史7", num: 80 },
            { label: "历史8", num: 80 },
          ],
        },
      ];
      this.headerList = this.tableData[0].options.map((item) => {
        return { label: item.label };
      });
      this.tableData = this.tableData.map((item) => {
        const sum = item.options.reduce((prev, curr) => {
          return prev + curr.num;
        }, 0);
        return {
          ...item,
          sum,
        };
      });
    },
    // TODO 使用 CSS transform
    // throttle    节流函数,组件自带的
    syncPostion: throttle(20, function () {
      const { scrollLeft, scrollTop, offsetWidth, scrollWidth } =
        this.footerWrapper;
      const {
        headerWrapper,
        bodyWrapper,
        footerWrapper,
        fixedBodyWrapper,
        rightFixedBodyWrapper,
      } = this.elTableRefs;
      console.log(footerWrapper, "footerWrapper");
      if (bodyWrapper) bodyWrapper.scrollLeft = scrollLeft;
      if (headerWrapper) headerWrapper.scrollLeft = scrollLeft;
      if (fixedBodyWrapper) fixedBodyWrapper.scrollTop = scrollTop;
      if (rightFixedBodyWrapper) rightFixedBodyWrapper.scrollTop = scrollTop;
      const maxScrollLeftPosition = scrollWidth - offsetWidth - 1;
      if (scrollLeft >= maxScrollLeftPosition) {
        this.scrollPosition = "right";
      } else if (scrollLeft === 0) {
        this.scrollPosition = "left";
      } else {
        this.scrollPosition = "middle";
      }
    }),
    // 绑定scroll事件
    bindEvents() {
      this.footerWrapper.addEventListener("scroll", this.syncPostion, {
        passive: true,
      });
    },
    // 解绑scroll事件
    unbindEvents() {
      this.footerWrapper.removeEventListener("scroll", this.syncPostion, {
        passive: true,
      });
    },
  },
};
script>
<style scoped>
::v-deep .el-table__fixed-footer-wrapper tbody td.el-table__cell{
  border-top: none;
}
style>
<style lang="less">
// 去除原本的进度条
.el-table__body-wrapper {
  overflow-x: hidden !important;
}
// 添加新的的进度条
.el-table__footer-wrapper {
  overflow-x: auto !important;
}
style>

块级元素以及行内元素居中显示

方法一：利用绝对定位实现元素垂直，水平居中显示：

<html>
<head>
    <title>title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        #container{
            position: relative;
            width: 400px;
            height: 300px;
            background-color: #ABC;
        }
        #center{
            position: absolute;
            width: 120px;
            height: 120px;
            top: 50%;
            left: 50%;
            margin-top: -60px;
            margin-left: -60px;
            background-color: #ACC;
        }
    style>
head>
<body>
<div id="container">
    <div id="center">
div>
div>
body>
html>

以上方法是我认为最好用的，不过缺点是需要知道元素的宽度和高度。通过设置需要定位的div元素为position: absolute, 然后通过top:50%, left:50%再加上margin-top: 负div高度的一半，margin-left:负div宽度的一半。

方法一也适用于img ,span等行内元素。

方法二：利用margin: 0 auto实现块级元素水平居中：

<html>
<head>
    <title>title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        #container{
            width: 400px;
            height: 300px;
            background-color: #ABC;
        }
        #center{
            margin: 0 auto;
            width: 120px;
            height: 100px;
            background: red;
        }
    style>
head>
<body>
    <div id="container">
        <div id="center">div>
    div>
body>
html>

此方法只能只能水平居中（并没有margin: auto 0这类写法）。另外需注意，必须设置元素的宽度才能实现居中！利用此方法若要实现img等行内元素居中需要加上display: block。

方法三：根据margin: auto 实现居中：


<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <style type="text/css">
        #container{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: red;
        }
        #div1{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: #69f;
        }
    style>
head>
<body>
    <div id="container">
        <div id="div1">div>
    div>
body>
html>

方法四：利用text-align: center;实现块级元素内部的行内元素水平居中：

<html>
<head>
    <title>title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        #container{
            width: 400px;
            height: 300px;
            background-color: #ABC;
            text-align: center;
        }
    style>
head>
<body>
<div id="container">
    <img src="./1.jpg" alt="">
div>
body>
html>

首先应当注意：

text-align: center;只作用于块级元素。但它不会控制元素的对齐，而只是影响元素内部内容。

如代码所示，text-align: center;作用于#container,但是使其内部的img元素（注意此处若是块级元素则不会居中）水平居中了。

方法五：利用vertical-align: middle; 实现垂直居中：

首先应当注意：

vertical-align: middle;只影响行内元素元素和替换元素，不影响块级元素中的内容对齐（和text-align截然不同）。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

现在，考虑一个问题，让一张图片在整个屏幕上居中：


<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        body{
            width:100%;
            height:100%;
        }
        #container{
            width:100%;
            height:100%;
            background: #ABC;
            text-align: center;
        }
        img{
            vertical-align: middle;
        }
    style>
head>
<body>
<div id="container">
    <img src="./1.jpg" alt=""/>
div>
body>
html>

运行以上代码，会发现，container的高度并没有占到整个屏幕。修改如下

给html元素也加上 height:100%;或者给container加上position: absolute。

现在，图片水平居中了，但没有垂直居中，代码做如下修改后就可以实现垂直也居中了。


<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        body{
            width:100%;
            height:100%;
        }
        #container{
            position: absolute;
            width:100%;
            height:100%;
            background: #ABC;
            text-align: center;
        }
        img{
            vertical-align: middle;
        }
    style>
head>
<body>
<div id="container">
    <span style="vertical-align:middle;display:inline-block;height:100%;">span>
    <img src="./1.jpg" alt=""/>
div>
body>
html>

display:inline-block是为了能够给span设置宽高，但是又不会产生换行。加上span并且也设置vertical-align:middle后，span和img 的中线就会对齐，从而实现效果img垂直居中。

方法六：根据display: table-cell 和 vertical-align: middle

vertical-align这个属性会设置单元格框中的单元格内容的对齐方式。

代码如下：


<html>
<head>
<meta charset="utf-8">
<title>title>
<style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    body{
        width:100%;
        height:100%;
    }
    #container{
        display: table-cell;
        width: 500px;
        height: 500px;
        text-align: center;
        vertical-align: middle;
        background-color: green;
    }
    #center{
        display: inline-block;
        width: 300px;
        height: 300px;
        background-color: red;
    }
style>
head>
<body>
<div id="container">
    <div id="center">div>
div>
body>
html>

通过添加display: table-cell;使得container变为表格元素，从而可以直接使用vertical-align: middle实现垂直居中。

方法七：根据CSS3属性display: box


<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        #container{
            width:500px;
            height: 500px;
            background-color:green;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            -webkit-box-align: center;
            -moz-box-align: center;
            -ms-flex-align:center;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack:center;
        }
        #center{
            width:300px;
            height:300px;
            background-color:blue;
        }
    style>
head>
<body>
<div id="container">
    <div id="center">div>
div>
body>
html>

（先写到这里吧，笔记整理）

numbers sequences strings hexadecimal random
本站内容来自用户投稿，如果侵犯了您的权利，请与我们联系删除。联系邮箱：835971066@qq.com

本文链接：http://news.xiuzhanwang.com/post/1171.html

上一篇 盐城企业网站建立价格

下一篇 贵定县企业网站开发

相关文章

发表评论

评论列表

还没有评论，快来说点什么吧~

最新发布

热门文章

热评文章

猜您喜欢

热门标签

友情链接：