TableSort 表格排序

TableSort 表格排序 的基础用法、公开 API 与示例。

基础示例

点击表头进行多字段排序。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { ref, } from "vue";
import { TableSort } from "@/components/page/table-sort";

const demoProps = { data: [{ name: "材料", sort: 1 }, { name: "报价", sort: 2 }] };
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <TableSort v-bind="demoProps">
        <el-table-column prop="name" label="名称" sortable />
        <el-table-column prop="sort" label="排序" sortable />
      </TableSort>
    </div>
  </ClientOnly>
</template>

隐藏源代码

多字段排序

展示同分数据在第二排序字段下的排序效果。

示例使用本地演示数据；上传、校验和提交不会连接业务后端。

<script setup lang="ts">
import { TableSort } from "@/components/page/table-sort";

const demoProps = {
  data: [
    { name: "材料 A", category: "材料", amount: 12 },
    { name: "材料 B", category: "材料", amount: 8 },
    { name: "设备 A", category: "设备", amount: 10 },
    { name: "设备 B", category: "设备", amount: 6 },
  ],
};
</script>

<template>
  <ClientOnly>
    <div class="demo-surface">
      <TableSort v-bind="demoProps">
        <el-table-column prop="category" label="分类" sortable />
        <el-table-column prop="amount" label="数量" sortable />
        <el-table-column prop="name" label="名称" />
      </TableSort>
    </div>
  </ClientOnly>
</template>

隐藏源代码

引入方式

import { TableSort } from "@/components/page/table-sort";

Props

参数	说明	类型	默认值	必填
data	数据	Recordable[]	-	是
loading	是否显示加载中	boolean	false	否

Events

事件名	说明	回调参数
-	该组件未声明 Events。	-

Slots

插槽名	说明	参数
default	默认内容插槽。	-
custom	custom 内容插槽。	sortChange, headerCellClassName

Expose

名称	说明	类型
handleHeaderCellClassName	暴露 handleHeaderCellClassName 给外部调用。	-
handleSort	暴露 handleSort 给外部调用。	-
el	暴露 el 给外部调用。	elTableInstance

Module API

名称	说明	类型
TableSort	导出 TableSort 供业务侧复用。	useInstall(index)

Types

TableSortProps

导出 TableSortProps 供业务侧复用。

字段	说明	类型	默认值	必填
data	数据	Recordable[]	-	是
loading	是否显示加载中	boolean	-	否

API 根据当前组件源码生成；同步版本与验证记录见维护说明。