Vue更改elmentui table排序

因项目需要,更改elementui table排序方式,默认的风格为以下:点击正三角按钮,为从小到大排序;点击倒三角按钮,为从大到小排序;点击三角以外的表头区域,排序会在正序,倒序,默认三种状态切换。
在这里插入图片描述
需求为以下:

  1. 默认的图标需求方不满意,需要修改为更明确的指示方式,换图标
  2. 从后端请求的数据默认按照日期升序,前端在起始时候需要设定第一列状态为升序
  3. 对于任意一列只保留升序与降序两种状态,点击表头任意区域均能切换

分析一下为了实现这个需求的思路

  1. 默认图标的更换,css隐藏原有图标,升降序从iconfont上找现成的,用render header写自定义表头加上图标
  2. 后端默认按日期升序下发数据如果用原本的图标,可以直接设置table的default-sort属性设置加载时默认的某一列的升序或降序。但是已经使用新图标的情况下,需要根据实际情况写逻辑,让第一列的默认排序显示为升序的状态
  3. 状态设置可以在sort-orders设置为[‘ascending’, ‘descending’],这样在点击表头任意区域(包括图标)时,只会进行升序和降序的切换,js写两种图标更换的逻辑,点击升降序图标不用加事件

默认的排序图标元素在class为caret-wrapper的元素中,隐藏原有排序图标

 .caret-wrapper {
   display: none!important;
 }

表头:render-header绑定方法,i标签中为图标,table初始加载时全部为升序图标,第一列日期设置为蓝色代表激活,其他列灰色代表未激活

renderH (h, {column, $index}) {
  if (column.property === 'date') {
    return (
      <div class="tableheader">
        <span>{ column.label }</span>
        <i class="iconfont iconjiantou-copy" style="color:#409eff;"></i>
      </div>
    )
  } else {
    return (
      <div class="tableheader">
        <span>{ column.label }</span>
        <i class="iconfont iconjiantou-copy" style="color:#c0c4cc;"></i>
      </div>
    )
  }
}

给每一列加上:sort-orders="[‘ascending’, ‘descending’]",让列排序只有升序、降序两种状态
剩下只剩图标的切换逻辑。首先,需要有图标重置的逻辑,当点击任意排序时,需要将所有列重置为灰色的图标状态,在这基础上操作当前列的排序图标;其次,对于非日期列,比较简单,根据当前排序时ascending或descending来设置图标和样式即可;最后,对于日期列的排序,比较复杂,要分为两种情况:

  1. 如果是table渲染后,已经点击了其他列的排序,再来点击日期列,这个时候的排序,和其他列逻辑一样
  2. 如果是table渲染后,直接点击日期列的排序,这时候图标显示的为升序生效状态,我们预期的是当我们第一次点击排序时,应该为降序descending排序,第二次点击排序时为升序ascending排序,但是在:sort-orders="[‘ascending’, ‘descending’]"的情况下,与预期相反,而我们又不能调整sort-orders为[‘descending’, ‘ascending’],这样虽然这种情况是好的,但是再点击别的列排序再回来点击日期列时就不对了。所以我们只能在渲染后直接点击日期排序情况做特殊处理,ascending做倒序排序,descending做升序排序;当点击别的列排序再点击日期列时,做正常排序处理。

绑定到@sort-change的方法如下:

tableSort ({column, prop, order}) {
  // 排序图标
  var icons = document.getElementsByClassName('tabledata')[0].getElementsByClassName('iconfont')
  // 先重置所有图标
  for (var i = 0; i < icons.length; i++) {
    icons[i].className = 'iconfont iconjiantou-copy'
    icons[i].style.color = '#c0c4cc'
  }
  // needSortRevert为判断是否渲染表格后直接点击日期列
  if (column.property === 'date' && this.needSortRevert) {
    if (order) {
      if (order === 'descending') {
        // 升序
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].style.color = '#409eff'
      } else {
        // 降序
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].className = 'iconfont iconjiantou'
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].style.color = '#409eff'
      }
    }
  } else {
    if (column.property !== 'date' && this.needSortRevert) {
      this.needSortRevert = false
    }
    if (order) {
      if (order === 'ascending') {
        // 升序
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].style.color = '#409eff'
      } else {
        // 降序
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].className = 'iconfont iconjiantou'
        document.getElementsByClassName(column.id)[0].getElementsByClassName('iconfont')[0].style.color = '#409eff'
      }
    }
  }

  if (column.property === 'date' && this.needSortRevert) {
    this.tableData.sort((a, b) => {
      if (order === 'descending') {
        // 升序
        if (a[prop] < b[prop]) {
          return -1
        } else if (a[prop] > b[prop]) {
          return 1
        } else {
          return 0
        }
      } else {
        // 降序
        if (a[prop] < b[prop]) {
          return 1
        } else if (a[prop] > b[prop]) {
          return -1
        } else {
          return 0
        }
      }
    })
  } else {
    this.tableData.sort((a, b) => {
      if (order === 'ascending') {
        // 升序
        if (a[prop] < b[prop]) {
          return -1
        } else if (a[prop] > b[prop]) {
          return 1
        } else {
          return 0
        }
      } else {
        // 降序
        if (a[prop] < b[prop]) {
          return 1
        } else if (a[prop] > b[prop]) {
          return -1
        } else {
          return 0
        }
      }
    })
  }
}

在这里插入图片描述

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue ElementUIVue.js 的 UI 组件库,是一款基于 Vue.js 的桌面端组件库。它提供了一些常用的 UI 组件,例如按钮、输入框、下拉列表、表格等。其中,表格是一种非常常见的组件,在数据展示和数据编辑上都有着重要的作用。 在使用 Vue ElementUI 编辑表格时,我们通常需要以下步骤: 1. 安装 Vue ElementUI 首先,我们需要使用 npm 安装 Vue ElementUI: ``` npm i element-ui -S ``` 2. 引入 Vue ElementUI 在需要使用 Vue ElementUI 的组件中引入 Vue ElementUI: ``` import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 3. 使用表格组件 Vue ElementUI 提供了一个非常方便的表格组件,我们只需要配置表格的列和数据,表格就可以自动生成。同时,表格支持编辑、排序、分页等常见操作。 ``` <el-table :data="tableData"> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> <el-table-column label="地址" prop="address"></el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button> </template> </el-table-column> </el-table> ``` 如上所示,我们只需要传入一个数组(tableData),以及配置每一列的 prop 和 label,就可以生成一个表格。同时,我们还可以在某一列中使用 slot,进行自定义操作,例如上面的“编辑”和“删除”按钮。 4. 编辑数据 在表格中编辑数据通常有两种方式:单元格编辑和行编辑。单元格编辑是指用户点击单元格后,编辑内容并保存;行编辑是指用户点击编辑按钮后,进入一条数据的编辑页面。 对于单元格编辑,Vue ElementUI 提供了 el-table-editable 组件: ``` <el-table :data="tableData"> <el-table-column label="姓名" prop="name" editable></el-table-column> <el-table-column label="年龄" prop="age" editable></el-table-column> <el-table-column label="地址" prop="address" editable></el-table-column> </el-table> ``` 而对于行编辑,则需要自行实现一个编辑页面,例如使用 Dialog 组件等。一般来说,编辑页面会接收一个具体的数据项作为 prop,并在界面中展示该数据项的各个字段,允许用户进行修改。 综上所述,Vue ElementUI 编辑表格具有简单易用、配置灵活等特点,是一款非常实用的组件库,广泛应用于数据管理、后台管理等多个领域。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值