排序面板

## Order 排序面板
可快速过滤相关字段信息
### 何时使用
当需降序，升序
### 应用背景
### 代码演示
<div class="textDiv">

![](/media/202404/2024-04-30_094821_747410.png)

```html
<template>
  <div style="height:200px;">
    <hi-order
     :sortdata="sortdata"
    ></hi-order>
    <div ref="htmltocanvas">
    <div>html转图片</div>
    <img width="100%" src="https://jianshu-zhufengli.oss-cn-hongkong.aliyuncs.com/QQ%E6%88%AA%E5%9B%BE20200529113808.jpg" />
</div>
  </div>
</template>

export default {
  data() {
    return {
      sortdata: [{ name: "FID", desc: "员工工号" }, { name: "FName", desc: "姓名" },{ name: "Farad", desc: "员工工资" }]
      
      
    };
  },
  methods: {
    beforequery(obj, param) {
      console.log("查询前");
    },
    afterquery(obj, param) {
      console.log("查询后");
    }
  }
};
</script>
```
</div>

### Attributes

| 参数       | 说明      | 类型     | 可选值 | 默认值 |
|----------|---------|--------|-----|-----|
| activeId | 默认选中项   | String | —   |     |
| sortdata | 排序资讯配置项 | Array  | —   |     |
| target   | 查询目标    | Object | —   |     |

### Events

| 事件名称        | 说明  | 回调参数        |
|-------------|-----|-------------|
| beforequery | 查询前 | param(查询参数) |
| afterquery  | 查询后 | param(查询参数) |

</style>