vue antdesign table组件添加尾部合计行

最新推荐文章于 2024-05-21 14:35:19 发布

@阿呜

最新推荐文章于 2024-05-21 14:35:19 发布

阅读量4.9k

点赞数 4

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

本文链接：https://blog.csdn.net/ke_sin/article/details/125208891

版权

vue 专栏收录该内容

20 篇文章 4 订阅

订阅专栏

问题：产品设计是表格尾部有合计行，前端自行计算值，我用的是vue+antdesign3.x版本，组件不自带合计功能，上网搜了很多方法，大部分是给表格添加动态footer，但是在我的项目里没实现出来，所以想了其他办法
解决思路：用一个div当做尾部合计行，在接口请求之后计算每一列的值，这样也会避免翻页时候出现的一系列问题
效果图
实现代码：

//html
<a-table
        ref='TableInfo'
        :loading='loading'
        :columns='columns'
        :dataSource='dataSource'
        :pagination='pagination'
        :row-selection='{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }'
        :scroll='{x:1200,y:540}'
        :rowKey="(record,index)=>{return index}"
        bordered
        @change='handleTableChange'>
        <template slot='operation' slot-scope='text,record'>
          <a @click='viewDetailClick(record)'>查看</a>
        </template>
</a-table>
//尾部合计行，我要计算9列的值，所以定义了9个变量(如果有更好的方法请分享)
<div class='subtotal'>
        <div class='left'>合计</div>
        <div class='number'>{{ total1.toFixed(2) }}</div>
        <div class='number'>{{ total2.toFixed(2) }}</div>
        <div class='number'>{{ total3.toFixed(2) }}</div>
        <div class='number'>{{ total4.toFixed(2) }}</div>
        <div class='number'>{{ total5.toFixed(2) }}</div>
        <div class='number'>{{ total6.toFixed(2) }}</div>
        <div class='number'>{{ total7.toFixed(2) }}</div>
        <div class='number'>{{ total8.toFixed(2) }}</div>
        <div class='number'>{{ total9.toFixed(2) }}</div>
        <div class='number'>{{  }}</div> // 这个是为了占位，因为我的操作列固定在了右侧，避免滚动条滚不到最后一列，保持合计行的列数和表格列数一样
</div>

// js
watch: {
    // 监听滚动条(把表格的滚动条隐藏了，只显示一条滚动条，监听滚动条滚动的时候，表格和尾部可以一起滑动)
    dataSource() {
      const dom = this.$refs.TableInfo.$el.getElementsByClassName('ant-table-body')[0];
      const footerDom = document.getElementsByClassName('subtotal')[0];
      footerDom.addEventListener(
        'scroll',
        () => {
          dom.scrollLeft = footerDom.scrollLeft;
        },
        true
      )
    }
  },
  methods: {
  // 请求接口成功后，循环，计算列的和
}

// css
<style lang='less' scoped>
.subtotal {
  height: 50px;
  position: absolute;
  bottom: 90px;
  width: 97%;
  border: 1px solid #e8e8e8;
  background: #F4F4F4;
  display: flex;
  align-items: center;
  font-weight: 900;
  overflow-x: scroll;
  overflow-y: hidden;

  .left {
    flex: none; /* div显示滚动条的重点 */
    width: 510px;
  }

  .number {
    flex: none;
    color: #666666;
    height: 100%;
    width: 150px;
    display: flex;
    align-items: center;
    padding-left: 15px;
  }
}
//隐藏a-table组件的滚动条
/deep/.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
  overflow: hidden !important;
}
</style>