手写el-table-column组件排序效果

需求

实现产品列表筛选条件排序，记得element-plus中的el-table-column实现了对表格数据排序的效果，不过俺现在做的是移动端页面，用的vant，vant没有类似的组件，于是打算手写一个。

思路

v-for遍历显示从父组件传来配置数据信息，flex一行进行显示，当点击上三角按钮时为升序，下三角为降序，再次点击时取消排序，当三角按钮被点击时，触发自定义事件sortOptionsChange，传递给父组件对应的prop（哪一栏）和state（升序、降序、不排序）信息，父组件接收到子组件传来的信息进行对应的后端请求

代码

子组件 table-column-sort.vue

父组件 product-list.vue

排序条件配置信息 sort.config.ts

export const sortOptions = [
  {
    prop: "rateOfReturn",
    label: "七日年化%"
  },
  {
    prop: "rateOfComparative",
    label: "业绩比较%"
  },
  {
    prop: "initialAmount",
    label: "起购金额"
  },
  {
    prop: "deadLine",
    label: "有效期限"
  }
]