zoukankan      html  css  js  c++  java
  • ElementUI

    ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序。

    项目需求: 点击表头排序的时候,对所有数据进行排序。

    初步方案: 在点击排序按钮的时,在排序事件sort-change 中,进行数据请求,
                     此时会先重拍一次当前页面的数据,再渲染接口返回数据。用户体验不是很好。

    优化方案: 使用render-header自定义tableHeader,此时要使用render函数来创建表头。

    getheaderTime(h) {
          const This = this
          return h('div', {
          },
            ['告警时间',
              h('span', {
                class: 'iline-table-sort'
              },
                [
                  h('i', {
                    'class': {
                      'el-icon-caret-bottom': This.orderByType === 'desc',
                      'el-icon-caret-top': This.orderByType === 'asc',
                      'active': This.orderBy === 'daqTime'
                    },
                    attrs: {
                      'orderByType': 'desc',
                      'orderType': 'daqTime'
                    },
                    on: {
                      click: This.clickHandler
                    },
                    style: {
                      fontSize: '22px'
                    }
                  })
                ]
              )
            ])
        }
  • 相关阅读:
    原生js面试题
    ZJOI2017day2退役战
    uoj6
    uoj5
    uoj2
    uoj1
    论逗逼的自我修养之ZJOI2017Day1
    noip2016滚粗记
    统计损失
    珍珠项链
  • 原文地址:https://www.cnblogs.com/isylar/p/10000064.html
Copyright © 2011-2022 走看看