feat: 拖拽表格

src/views/Components/Table/TableImagePreview.vue

@@ -0,0 +1,82 @@
+<script setup lang="tsx">
+import { ContentWrap } from '@/components/ContentWrap'
+import { useI18n } from '@/hooks/web/useI18n'
+import { Table, TableColumn } from '@/components/Table'
+import { getTableListApi } from '@/api/table'
+import { TableData } from '@/api/table/types'
+import { ref } from 'vue'
+import { ElTag } from 'element-plus'
+
+interface Params {
+  pageIndex?: number
+  pageSize?: number
+}
+
+const { t } = useI18n()
+
+const columns: TableColumn[] = [
+  {
+    field: 'title',
+    label: t('tableDemo.title')
+  },
+  {
+    field: 'image_uri',
+    label: t('tableDemo.preview')
+  },
+  {
+    field: 'author',
+    label: t('tableDemo.author')
+  },
+  {
+    field: 'display_time',
+    label: t('tableDemo.displayTime')
+  },
+  {
+    field: 'importance',
+    label: t('tableDemo.importance'),
+    formatter: (_: Recordable, __: TableColumn, cellValue: number) => {
+      return (
+        <ElTag type={cellValue === 1 ? 'success' : cellValue === 2 ? 'warning' : 'danger'}>
+          {cellValue === 1
+            ? t('tableDemo.important')
+            : cellValue === 2
+            ? t('tableDemo.good')
+            : t('tableDemo.commonly')}
+        </ElTag>
+      )
+    }
+  },
+  {
+    field: 'pageviews',
+    label: t('tableDemo.pageviews')
+  }
+]
+
+const loading = ref(true)
+
+let tableDataList = ref<TableData[]>([])
+
+const getTableList = async (params?: Params) => {
+  const res = await getTableListApi(
+    params || {
+      pageIndex: 1,
+      pageSize: 10
+    }
+  )
+    .catch(() => {})
+    .finally(() => {
+      loading.value = false
+    })
+  if (res) {
+    tableDataList.value = res.data.list
+  }
+}
+
+getTableList()
+</script>
+
+<template>
+  <ContentWrap :title="t('router.PicturePreview')">
+    <Table :columns="columns" :data="tableDataList" :loading="loading" :preview="['image_uri']" />
+  </ContentWrap>
+</template>

src/views/Components/Table/TreeTable.vue

@@ -92,7 +92,7 @@ const actionFn = (data: TableSlotDefault) => {
 </script>
 
 <template>
-  <ContentWrap :title="`TreeTable ${t('tableDemo.example')}`">
+  <ContentWrap :title="`${t('router.treeTable')} ${t('tableDemo.example')}`">
     <Table
       v-model:pageSize="pageSize"
       v-model:currentPage="currentPage"

src/views/Components/Table/UseTableDemo.vue

@@ -21,7 +21,8 @@ const { tableRegister, tableMethods, tableState } = useTable({
   }
 })
 const { loading, dataList, total, currentPage, pageSize } = tableState
-const { setProps, setColumn, getElTableExpose, addColumn, delColumn, refresh } = tableMethods
+const { setProps, setColumn, getElTableExpose, addColumn, delColumn, refresh, sortableChange } =
+  tableMethods
 
 const { t } = useI18n()
 
@@ -213,6 +214,11 @@ const getSelections = async () => {
   const selections = elTableRef?.getSelectionRows()
   console.log(selections)
 }
+
+const sortable = ref(false)
+const showOrHiddenSortable = () => {
+  sortable.value = !unref(sortable)
+}
 </script>
 
 <template>
@@ -244,6 +250,8 @@ const getSelections = async () => {
     <ElButton @click="fixedHeaderOrAuto">{{ t('tableDemo.fixedHeaderOrAuto') }}</ElButton>
 
     <ElButton @click="getSelections">{{ t('tableDemo.getSelections') }}</ElButton>
+
+    <ElButton @click="showOrHiddenSortable">{{ t('tableDemo.showOrHiddenSortable') }}</ElButton>
   </ContentWrap>
   <ContentWrap :title="`UseTable ${t('tableDemo.example')}`">
     <Table
@@ -253,6 +261,7 @@ const getSelections = async () => {
       :columns="columns"
       :data="dataList"
       :loading="loading"
+      :sortable="sortable"
       :pagination="
         canShowPagination
           ? {
@@ -262,6 +271,7 @@ const getSelections = async () => {
       "
       @register="tableRegister"
       @refresh="refresh"
+      @sortable-change="sortableChange"
     />
   </ContentWrap>
 </template>