文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue element-ui动态横向统计表格的实现

2022-11-13 13:52

关注

element-ui动态横向统计表格

表格结构

<el-table
      :data="AllData"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="统计">
      </el-table-column>
      <el-table-column
        v-for="(item,index) in allList"
        :prop="item.key"
        :key="index"
        :label="item.feeName">
      </el-table-column>
      <el-table-column
        prop="join"
        label="合计">
      </el-table-column>
    </el-table>

data

AllData:[],
allList:[],

methods:

setData(){
        //这里请求后台的统计信息,合计可以在我这里进行运算
        var getData = [
          {
            title:'未入账',
            data:[
              {
                feeName:'考试费1',
                num:2001,
              },
              {
                feeName:'考试费2',
                num:2002,
              },
              {
                feeName:'考试费3',
                num:2003,
              },
              {
                feeName:'考试费4',
                num:2004,
              }
            ]
          }
        ]
        for (var i in getData){
          var a = {}
          var b = []
          a['title'] = getData[i].title
          var x = 0
          var join = 0
          getData[i].data.forEach(function (e){
            x+=1
            join+=e.num
            b.push({feeName:e.feeName,key:'num'+x})
            a['num'+x] =  e.num
            a['join'] = join
          })
          this.AllData.push(a)
          this.allList = b
        }
      },

请求到 getData这个json之后就组建新的对象

created(){
      this.setData()
    },

最后上效果图…

附:

如果增加下面图中json对象的对应数据,表格可以横轴纵轴增加数据

关于element-ui表格问题

表格图片显示问题

问题:

表格中是用户信息,有用户头像,用户头像图片没显示,当两个用户头像地址一样,前一页还显示,下一页就没有了

环境:

解决:

原因1:el-avatar组件内有一个isImageExist,默认情况下图片请求失败会把它设置为false,一旦设置为false,就不会再变成true,此时修改图片为正确地址也不会渲染图片。

原因2:el-table表格更新,默认是会只更新变化部分,尽量减少dom操作。

因此一旦有图片请求失败,就很有可能导致原来有头像的用户显示不出来,解决办法是给el-table增加属性row-key=“id”,这样表格就会更新所有行的dom。

表格中多出一条线

问题:

表格中设置了最后一列固定右侧,当缩放浏览器让表格产生横向滚动条,然后缩放到表格没有横向滚动条,此时多出一条线

环境:

解决:

el-table中.el-table__fixed元素产生的线,当表格出现横向滚动条时,.el-table__fixed元素的高度会减去滚动条的宽度gutterWidth,但是缩放到不显示滚动条时.el-table__fixed元素高度并不会再加上gutterWidth,这样导致表格多出一条线。

所以问题就是要覆盖掉元素错误的高度样式,为了避免影响过多,可以在选择器上面加一些其他限制,下面的不做限制。

.el-table__fixed-right{
    height: 100% !important;
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯