航站视图-表格行选中、滚动条宽度调整

src/views/realTime/components/AirportView/index.scss

@@ -60,6 +60,9 @@
       }
       .el-table-v2__body {
         .el-table-v2__row {
+          &.is-selected {
+            background-color: var(--el-table-current-row-bg-color);
+          }
           &.bg-gray {
             background-color: #d2d6df;
           }
@@ -99,4 +102,3 @@
     }
   }
 }
-

src/views/realTime/components/AirportView/index.vue

@@ -36,12 +36,17 @@
             :style="{ visibility }"
             :columns="customRendererColumns"
             :data="dealedTableData"
+            row-key="rowKey"
             :width="width"
             :height="height"
             :fixed="isDeparture"
             :footer-height="60"
-            :row-class="rowClassV2"
+            :row-class="rowClass"
             :cell-props="cellPropsGetter"
+            :row-event-handlers="rowEventHandlers"
+            :h-scrollbar-size="12"
+            :w-scrollbar-size="12"
+            scrollbar-always-on
             @scroll="tableScrollHandler"
           >
             <template #footer>
@@ -79,9 +84,9 @@ import { useTableStyle } from '../../hooks/useTableStyle'
 import { useTableCellClick } from '../../hooks/useTableCellClick'
 import { useTableFilterAndSort } from '@/hooks/useTableFilterAndSort'
 import { useCount } from './useCount'
-import { ElTableV2, TableV2Instance } from 'element-plus'
+import { ElTableV2, RowEventHandlers, TableV2Instance } from 'element-plus'
 import { CommonData } from '~/common'
-import type { HeaderRenderProps, CellRenderProps, ScrollParams } from '../../type'
+import type { HeaderRenderProps, CellRenderProps, RowClassGetter, ScrollParams } from '../../type'
 import { useLoop } from '@/hooks/useLoop'
 
 const props = defineProps({
@@ -139,6 +144,19 @@ const { rowClassV2, cellClassV2 } = useTableStyle(props.name)
 const cellPropsGetter = params => ({
   class: cellClassV2(params),
 })
+const rowClass: RowClassGetter = (params) => {
+  const selectedRowClass = (selectedRowKey.value && params.rowData.rowKey === selectedRowKey.value) ? 'is-selected' : ''
+  return `${rowClassV2(params)} ${selectedRowClass}`
+}
+const selectedRowKey = ref('')
+watch(formData, () => {
+  selectedRowKey.value = ''
+})
+const rowEventHandlers:RowEventHandlers = {
+  onClick: (params) => {
+    selectedRowKey.value = params.rowKey as string
+  }
+}
 
 const tableDataCount = computed(() =>
   tableData.value.reduce(

src/views/realTime/components/AirportView/useAirportTable.ts

@@ -782,7 +782,10 @@ export function useAirportTable(name: string, formData: CommonData) {
       //   align: 'center',
       //   ...column,
       // }))
-      tableData.value = listValues
+      tableData.value = listValues.map(row => ({
+        ...row,
+        rowKey: `${row.IATACode}-${row.flightNO}-${row.flightDate}`,
+      }))
     } catch (error) {
       console.error(error)
     }

src/views/realTime/hooks/useTableStyle.ts

@@ -1,7 +1,7 @@
 import { Column } from 'element-plus'
-import { CommonData, CommonTableColumn, CommonValue } from '~/common'
+import { CommonData, CommonValue } from '~/common'
+import { RowClassGetter } from '../type'
 
-type RowClassGetter = (param: { columns: CommonTableColumn[]; rowData: any; rowIndex: number }) => string
 type CellClassGetter = (params: {
   column: Column<CommonData>
   columns: Column<CommonData>[]
@@ -73,7 +73,14 @@ export function useTableStyle(tableName?: string) {
     return classes.join(' ')
   }
 
-  const cellClassV2: CellClassGetter = ({ column, columns, columnIndex, cellData, rowData, rowIndex }) => {
+  const cellClassV2: CellClassGetter = ({
+    column,
+    columns,
+    columnIndex,
+    cellData,
+    rowData,
+    rowIndex,
+  }) => {
     const classes: string[] = []
     // if ((['4/243', '0/6'] as any[]).includes(cellData)) {
     //   classes.push('cell-warning')

src/views/realTime/type.d.ts

@@ -20,6 +20,11 @@ type CellRenderProps = {
   rowData: CommonData
   rowIndex: number
 }
+type RowClassGetter = (param: {
+  columns: CommonTableColumn[]
+  rowData: any
+  rowIndex: number
+}) => string
 type ExportOptions = {
   table: MaybeRef<InstanceType<typeof ElTable>>
   sheetName?: string