iview table 默认排序字段不高亮解决办法

iview treeSelect 组件封装

1、表格增加排序时触发的方法

javascript 复制代码
Table(
      :columns='columns'
      :data='tableData'
      @on-sort-change="sortChange"
    )

2、定义三个变量,sortColumnDefaultStyle存放默认的样式,定义页面默认的列以及顺序

javascript 复制代码
// 默认样式
      sortColumnDefaultStyle: null,
      // 排序的列
      columnSorting: 'dialing_time',
      // 正序或者倒叙
      sortingRules: 'desc',

3、显示的列加上 sortable, 和样式

javascript 复制代码
 sortable: 'custom',
 className: 'sort-column',

4、使用下面这块代表默认选中

javascript 复制代码
mounted () {
    this.$nextTick(() => {
      // 获取到节点并添加一个元素on, on表示选中的样式
      this.sortColumnDefaultStyle = document.getElementsByClassName('sort-column')[0].getElementsByClassName('ivu-table-cell')[0].getElementsByClassName('ivu-table-sort')[0].getElementsByClassName('ivu-icon ivu-icon-arrow-down-b')[0]
      this.sortColumnDefaultStyle.classList.add('on')
      console.log('sortColumnDefaultStyle', this.sortColumnDefaultStyle)
    })
  },

5、点击时清除掉默认的排序

javascript 复制代码
// column:当前列数据
    // key:排序依据的指标
    // order:排序的顺序,值为 asc 或 desc
    sortChange (e) {
      let key = e.key
      const order = e.order
      if (key === 'dialingTime') {
        key = 'dialing_time'
      } else if (key === 'timeCons') {
        key = 'time_cons'
      }
      this.columnSorting = key
      this.sortingRules = order
      if (this.sortingRules === 'normal') {
        this.columnSorting = null
        this.sortingRules = null
      }
      // 点击排序之后清除默认设置的高亮排序
      if (this.sortColumnDefaultStyle) {
        this.sortColumnDefaultStyle.classList.remove('on')
        this.sortColumnDefaultStyle = null
      }
      this.query()
    },

6、把排序的字段查询时传给后端

javascript 复制代码
orderBy: this.columnSorting,
order: this.sortingRules
相关推荐
代码老祖4 天前
vue2 + iview(view-design) 中封装使用 vxe-table 处理表格渲染大量数据卡顿现象
前端·vue.js·view design·vxe-table
前端张三2 个月前
vue2 + View design 使用inputNumber设置默认值为undefined但展示数据为1且表单校验不通过的原因
前端·vue.js·view design
前端李易安2 个月前
iview Form Input组件按下回车键搜索和禁止触发表单默认事件
view design
D_J_Dragon2 个月前
快速搭建最简单的前端项目vue+View UI Plus
前端·vue.js·view design
不cong明的亚子2 个月前
记一次高版本view-design的组件迁移到自身项目的低版本
vue.js·view design·view ui
lyz2468593 个月前
iview checkbox单独使用时 如何去掉显示的true和false以及不显示文字
view design
Yang_yangyang3 个月前
上传文件,文件类型限制语法,各种媒体视频文件的Content-Type
前端框架·jquery·html5·anti-design-vue·view design
lixh_man3 个月前
iview 2.x table 设置固定列后 中间留白的问题
前端·javascript·view design
前端热爱者4 个月前
vue项目使用iview☞Modal后页面不能滚动的诡异问题
前端·vue.js·view design
Э时间行者于我5 个月前
Vue iview-ui 被tooltip包裹的标题,点击跳转后,提示框不消失
vue.js·ui·view design