element table合计(可点击,自定义值,修改样式,第一行展示)

1、设置合计第一行展示

<style scoped>
  /* /deep/ 为深度操作符,可以穿透到子组件 */
  /deep/ .el-table {
    display: flex;
    flex-direction: column;
  }

  /* order默认值为0,只需将表体order置为1即可移到最后,这样总计行就上移到表体上方 */
  /deep/ .el-table__body-wrapper {
    order: 1;
  }
</style>

在这里插入图片描述

2、自定义合计颜色

<style scoped>
  /*合计字体颜色*/
  /deep/ .el-table__footer-wrapper tbody td {
    color: #409EFF;
    cursor: pointer;
  }
  /deep/ .el-table__footer-wrapper tbody td:first-child{
    color: red;
    cursor: auto;
  }
</style>

在这里插入图片描述

3、自定义合计数量(展示后台返回值)

      <el-table :data="tableData" border stripe show-summary :summary-method="getSummaries" class="table">
        <el-table-column align="center" prop="name" label="名称" ></el-table-column>
        <el-table-column align="center" prop="num" label="数量" ></el-table-column>
      </el-table>
    methods: {
      // 总计
      getSummaries(param) {
        const { columns } = param;
        const sums = [];
        columns.forEach((column, index) => {
          // index 第几列从0开始
          if (index === 0) {
            sums[0] = '总计';
            return;
          }
          if (index === 1) {
            // this.customNum 自定义值一般为后台返回合计值
            sums[1] = this.customNum;
            return;
          }
          sums[index] = '';
        });
        return sums;
      }
    },

在这里插入图片描述

4、合计添加点击事件

    mounted() {
      let this_ = this;
      let table = document.querySelector('.el-table__footer-wrapper>table');
      this.$nextTick(()=>{
        table.rows[0].cells[1].onclick = function(){
          this_.totalClick();
        };
      })
    },
    methods: {
      // 总计点击事件
      totalClick() {
        alert('点击了')
      },
    },

在这里插入图片描述

附:所有代码

<template>
    <div align="center">
      <p>自定义合计</p>
      <el-table :data="tableData" border stripe show-summary :summary-method="getSummaries" class="table">
        <el-table-column align="center" prop="name" label="名称" ></el-table-column>
        <el-table-column align="center" prop="num" label="数量" ></el-table-column>
      </el-table>
    </div>
</template>

<script>
  export default {
    name: "demo1",
    data() {
      return {
        tableData:[{
          num: 20,
          name: '苹果'
        },{
          num: 30,
          name: '草莓'
        }],
        customNum: 120,
      };
    },
    mounted() {
      let this_ = this;
      let table = document.querySelector('.el-table__footer-wrapper>table');
      this.$nextTick(()=>{
        table.rows[0].cells[1].onclick = function(){
          this_.totalClick();
        };
      })
    },
    methods: {
      // 总计点击事件
      totalClick() {
        alert('点击了')
      },
      // 总计
      getSummaries(param) {
        const { columns } = param;
        const sums = [];
        columns.forEach((column, index) => {
          // index 第几列从0开始
          if (index === 0) {
            sums[0] = '总计';
            return;
          }
          if (index === 1) {
            // this.customNum 自定义值一般为后台返回合计值
            sums[1] = this.customNum;
            return;
          }
          sums[index] = '';
        });
        return sums;
      }
    },
  }
</script>

<style scoped>
  p {
    font-size: 30px;
    margin-top: 20px;
  }
  .table {
    width: 80%;
    margin-top: 30px;
  }
  /* /deep/ 为深度操作符,可以穿透到子组件 */
  /deep/ .el-table {
    display: flex;
    flex-direction: column;
  }

  /* order默认值为0,只需将表体order置为1即可移到最后,这样总计行就上移到表体上方 */
  /deep/ .el-table__body-wrapper {
    order: 1;
  }
  /*总计字体颜色*/
  /deep/ .el-table__footer-wrapper tbody td {
    color: #409EFF;
    cursor: pointer;
  }
  /deep/ .el-table__footer-wrapper tbody td:first-child{
    color: red;
    cursor: auto;
  }
</style>

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值