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

需求

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

代码

子组件 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: "有效期限"
  }
]