avue 怎么实现自定义排序

没啥时间,简单粗暴,直接上代码

1.配置项配置

export const tableOption = {
  border: true,
  index: true,
  indexLabel: '序号',
  stripe: true,
  menu:false,
  height:500,
  menuWidth:100,
  menuAlign: 'center',
  stripe:false,
  align: 'center',
  editBtn: false,
  delBtn: false,
  addBtn: false,
  column: [
    {
      label: 'xxx',//要排序的表头名字
      prop: 'xxx',//表头字段,跟接口一致
      sortable: 'custom'//自定义排序要设置的值
    },
 ]
}

第二步,xx.vue文件

<avue-crud ref="crud"
                     :page="page"
                     :data="tableData"
                     :table-loading="tableLoading"
                     :option="tableOption"
                     :row-style="rowStyle"
                     @search-change="searchChange"
                     @size-change="sizeChange"
                     @search-reset="searchReset"
                     @current-change="currentChange"
                     @refresh-change="refreshChange"
                     @row-update="handleUpdate"
                     @row-save="handleSave"
                     @sort-change="sortChange"//自定义排序函数
                     @row-del="rowDel">
</avue-crud>

export default {
  name: "",
  data () {
    return {

  },
  created () {
    
  },
  mounted: function () { },
  computed: {
    
  },
  methods: {
    // 自定义排序
    sortChange (val) {
      switch (val.prop) {
        case "xx"://这里是需要排序的字段的prop值
       
          break;
        case "xxxx":
         
          break;
     
        default:
          break;
      }
    },
  
  },
};

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值