SortTable 排序表格

拖拽排序表格，对 s-table 进行了二次封装，提供了拖拽排序功能。

基本用法

点击查看代码

<template>
  <s-sort-table :columns="tableColumns" :dataSource="tableData" border></s-sort-table>
</template>

<script>
  export default {
    name: "SortTableBase",
    data() {
      return {
        tableColumns: [
          { prop: "name", label: "姓名" },
          { prop: "phone", label: "电话" },
          { prop: "date", label: "日期" }
        ],

        tableData: [
          { id: "111", name: "张三", phone: "136 1111 1111", date: "2024-07-01" },
          { id: "222", name: "李四", phone: "136 2222 2222", date: "2024-07-02" },
          { id: "333", name: "王五", phone: "136 3333 3333", date: "2024-07-03" }
        ]
      }
    }
  }
</script>

固定列

点击查看代码

<template>
  <s-sort-table :columns="tableColumns" :dataSource="tableData" border></s-sort-table>
</template>

<script>
  export default {
    name: "SortTableScrollX",
    data() {
      return {
        tableColumns: [
          { prop: "name", label: "姓名", width: "300px", fixed: true },
          { prop: "phone", label: "电话", width: "600px" },
          { prop: "date", label: "日期", width: "600px" }
        ],

        tableData: [
          { id: "111", name: "张三", phone: "136 1111 1111", date: "2024-07-01" },
          { id: "222", name: "李四", phone: "136 2222 2222", date: "2024-07-02" },
          { id: "333", name: "王五", phone: "136 3333 3333", date: "2024-07-03" }
        ]
      }
    }
  }
</script>

Props

Emits

Slots