排序

src/components/ProTable/interface/index.ts

@@ -81,6 +81,7 @@ export interface ColumnProps<T = any>
   headerRender?: (scope: HeaderRenderScope<T>) => VNode; // 自定义表头内容渲染（tsx语法）
   render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
   _children?: ColumnProps<T>[]; // 多级表头
+  sortable?:boolean | Ref<boolean>; // 是否显示排序
 }
 
 export type ProTableInstance = Omit<InstanceType<typeof ProTable>, keyof ComponentPublicInstance | keyof ProTableProps>;

src/views/alarm/allData/index.vue

@@ -27,14 +27,14 @@
         </div>
       </div>
       <!-- 表格主体 -->
-      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
+      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" @sort-change="handleSortChange">
         <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
           <template #default="scope">
             {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
           </template>
         </el-table-column>
         <template v-for="item in columns" :key="item">
-          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
+          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :sortable="item.sortable" :show-overflow-tooltip="true">
           </el-table-column>
         </template>
         <!-- 无数据 -->
@@ -94,7 +94,8 @@
 import Pagination from "@/components/ProTable/components/Pagination.vue";
 import { ref, reactive } from "vue";
 import { ColumnProps } from "@/components/ProTable/interface";
-import {TabsInstance} from "element-plus";
+import {ElTable} from "element-plus";
+const tableRef = ref<InstanceType<typeof ElTable>>();
 const dialog = reactive<any>({
   visible: false,
   title: ''
@@ -113,6 +114,12 @@ const cancel = () => {
   dialog.visible = false;
 }
 
+const handleSortChange = ({ column, prop, order }) =>{
+  // 在这里发送请求到服务器端进行远程排序
+  console.log('column:', column)
+  console.log('prop:', prop)
+  console.log('order:', order)
+}
 
 const pageable = ref<any>({
   pageNum: 1,
@@ -404,10 +411,10 @@ const columns = reactive<ColumnProps[]>([
   { prop: "b", label: "站号" },
   { prop: "c", label: "地址" },
   { prop: "d", label: "观测时间" },
-  { prop: "e", label: "瞬风风速(m/s)" },
-  { prop: "f", label: "瞬风方向(°)" },
-  { prop: "g", label: "气温(℃)" },
-  { prop: "h", label: "相对湿度(%)" },
-  { prop: "i", label: "漏点温度(℃)" }
+  { prop: "e", label: "瞬风风速(m/s)",sortable: true },
+  { prop: "f", label: "瞬风方向(°)",sortable: true },
+  { prop: "g", label: "气温(℃)",sortable: true },
+  { prop: "h", label: "相对湿度(%)" ,sortable: true},
+  { prop: "i", label: "漏点温度(℃)",sortable: true }
 ]);
 </script>

src/views/alarm/allWeather/index.vue

@@ -33,14 +33,14 @@
         </div>
       </div>
       <!-- 表格主体 -->
-      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
+      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" @sort-change="handleSortChange">
         <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true">
           <template #default="scope">
             {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
           </template>
         </el-table-column>
         <template v-for="item in columns" :key="item">
-          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
+          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :sortable="item.sortable" :show-overflow-tooltip="true">
           </el-table-column>
         </template>
         <!-- 无数据 -->
@@ -78,6 +78,13 @@ const queryParams = ref({
   total: 2
 });
 
+const handleSortChange = ({ column, prop, order }) =>{
+  // 在这里发送请求到服务器端进行远程排序
+  console.log('column:', column)
+  console.log('prop:', prop)
+  console.log('order:', order)
+}
+
 // 查询功能
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -143,8 +150,8 @@ const columns = reactive<ColumnProps[]>([
   { prop: "d", label: "策略状态" },
   { prop: "e", label: "告警类型" },
   { prop: "f", label: "观测值" },
-  { prop: "g", label: "告警时间",width:150 },
-  { prop: "h", label: "消警时间",width:150},
+  { prop: "g", label: "告警时间",width:150,sortable: true },
+  { prop: "h", label: "消警时间",width:150,sortable: true },
   { prop: "i", label: "通知方式" },
   { prop: "j", label: "告警说明",width:400 }
 ]);

src/views/query/deviceHealth/index.vue

@@ -67,14 +67,14 @@
         </div>
       </div>
       <!-- 表格主体 -->
-      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
+      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" @sort-change="handleSortChange">
         <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true" >
           <template #default="scope">
             {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
           </template>
         </el-table-column>
         <template v-for="item in columns" :key="item">
-          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true" >
+          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :sortable="item.sortable" :show-overflow-tooltip="true" >
           </el-table-column>
         </template>
         <!-- 无数据 -->
@@ -144,6 +144,13 @@ const handleSetting = () => {
   dialog.visible = true;
 }
 
+const handleSortChange = ({ column, prop, order }) =>{
+  // 在这里发送请求到服务器端进行远程排序
+  console.log('column:', column)
+  console.log('prop:', prop)
+  console.log('order:', order)
+}
+
 const submitForm = () => {
 
 }
@@ -216,7 +223,7 @@ const processTableData = ref([
 const columns = reactive<ColumnProps[]>([
   { prop: "a", label: "站名" },
   { prop: "b", label: "站号" },
-  { prop: "d", label: "观测时间" },
+  { prop: "d", label: "观测时间",sortable: true },
   { prop: "e", label: "超声风传感器" },
   { prop: "f", label: "气温传感器" },
   { prop: "g", label: "湿度传感器" },

src/views/query/hazardousWeather/index.vue

@@ -33,14 +33,14 @@
         </div>
       </div>
       <!-- 表格主体 -->
-      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
+      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" @sort-change="handleSortChange">
         <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true" >
           <template #default="scope">
             {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
           </template>
         </el-table-column>
         <template v-for="item in columns" :key="item">
-          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true" >
+          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :sortable="item.sortable" :show-overflow-tooltip="true" >
           </el-table-column>
         </template>
         <!-- 无数据 -->
@@ -78,6 +78,14 @@ const queryParams = ref({
   total: 2
 });
 
+const handleSortChange = ({ column, prop, order }) =>{
+  // 在这里发送请求到服务器端进行远程排序
+  console.log('column:', column)
+  console.log('prop:', prop)
+  console.log('order:', order)
+}
+
+
 // 查询功能
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -143,8 +151,8 @@ const columns = reactive<ColumnProps[]>([
   { prop: "d", label: "策略状态" },
   { prop: "e", label: "告警类型" },
   { prop: "f", label: "观测值" },
-  { prop: "g", label: "告警时间",width:150 },
-  { prop: "h", label: "消警时间",width:150},
+  { prop: "g", label: "告警时间",width:150,sortable: true },
+  { prop: "h", label: "消警时间",width:150,sortable: true},
   { prop: "i", label: "通知方式" },
   { prop: "j", label: "告警说明",width:400 }
 ]);

src/views/query/queryObservationData/index.vue

@@ -75,14 +75,14 @@
         </div>
       </div>
       <!-- 表格主体 -->
-      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
+      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" @sort-change="handleSortChange">
         <el-table-column align="left" label="序号" width="80px" :show-overflow-tooltip="true" >
           <template #default="scope">
             {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
           </template>
         </el-table-column>
         <template v-for="item in columns" :key="item">
-          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true" >
+          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :sortable="item.sortable" :show-overflow-tooltip="true" >
           </el-table-column>
         </template>
         <!-- 无数据 -->
@@ -248,6 +248,13 @@ const dialogQuery = reactive<any>({
   title: ''
 });
 
+const handleSortChange = ({ column, prop, order }) =>{
+  // 在这里发送请求到服务器端进行远程排序
+  console.log('column:', column)
+  console.log('prop:', prop)
+  console.log('order:', order)
+}
+
 const submitQueryForm = () => {
 
 }
@@ -354,11 +361,11 @@ const processTableData = ref([
 const columns = reactive<ColumnProps[]>([
   { prop: "a", label: "站名" },
   { prop: "b", label: "站号" },
-  { prop: "d", label: "观测时间" },
-  { prop: "e", label: "瞬风风速(m/s)" },
-  { prop: "f", label: "瞬风方向(°)" },
-  { prop: "g", label: "气温(℃)" },
-  { prop: "h", label: "相对湿度(%)" },
-  { prop: "i", label: "垂直能见度(m)" }
+  { prop: "d", label: "观测时间",sortable: true },
+  { prop: "e", label: "瞬风风速(m/s)",sortable: true },
+  { prop: "f", label: "瞬风方向(°)",sortable: true },
+  { prop: "g", label: "气温(℃)",sortable: true },
+  { prop: "h", label: "相对湿度(%)",sortable: true },
+  { prop: "i", label: "垂直能见度(m)",sortable: true }
 ]);
 </script>