开发者社区> 问答> 正文

宜搭表格组件排序

各位大神,问一下宜搭表格,这个排序怎么配置,代码怎么写?

展开
收起
游客r5h4yis5ymwxc 2023-09-03 13:51:20 95 0
3 条回答
写回答
取消 提交回答
  • 天下风云出我辈,一入江湖岁月催,皇图霸业谈笑中,不胜人生一场醉。

    下拉组件(单选、复选)、关联表单、关联查询 组件支持内容排序
    选取数值、时间类型的字段,选取升序或降序规则,进行展示内容排序image.png
    脚本节点引擎由groovy升级为JavaScript,低代码更易编写image.png

    2023-09-14 15:56:28
    赞同 展开评论 打赏
  • 十分耕耘,一定会有一分收获!

    楼主你好,可以使用表格组件的sort功能来进行排序。具体步骤如下:

    1. 在表格组件中添加sortable属性,以启用排序功能。

    2. 通过表头的click事件来实现排序,例如:
      005.png

    <th @click="sortBy('name')">Name</th>
    
    1. 在methods中添加sortBy方法,用于对数据进行排序,例如:
      006.png
    sortBy(key) {
        this.sortKey = key;
        this.sortOrders[key] = this.sortOrders[key] * -1;
        this.items = _.orderBy(this.items, key, this.sortOrders[key] === 1 ? 'asc' : 'desc');
    }
    

    其中,sortKey是当前正在排序的关键字,sortOrders是一个对象,用于记录每个关键字的排序方式(1表示升序,-1表示降序),items是当前要排序的数据。

    1. 在表格组件中使用v-for循环渲染数据,并套用排序方式,例如:
      007.png
    <tr v-for="item in items | orderBy(sortKey, sortOrders[sortKey])">
    

    其中,orderBy是Vue.js内置的过滤器,用于对数据进行排序。

    这样,就可以方便地对表格组件进行排序了。

    2023-09-03 16:08:21
    赞同 展开评论 打赏
  • 十年摸盘键,代码未曾试。 今日码示君,谁有上云事。

    若想给宜搭表单中的组件进行排序,您可以参考以下方案:

    (1)方法一:在需要进行排序的组件上选中,使用鼠标拖动即可进行排序。 

    (2)方法二:在左上角的大纲树可以进行排序设置 

    2023-09-03 14:54:33
    赞同 1 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
宜搭 - 企业智能化应用搭建平台 立即下载
《云市场-宜搭解决方案》 立即下载
《宜搭开发手册》 立即下载