useTableStyle.ts 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. import { CommonTableColumn } from '~/common'
  2. import type { CellSlotProps } from '../type'
  3. type RowClassGetter = (param: {
  4. columns: CommonTableColumn[]
  5. rowData: any
  6. rowIndex: number
  7. }) => string
  8. type CellClassGetter = (param: CellSlotProps) => string
  9. const defaultCellClass = 'el-table-v2__cell-text'
  10. export default function useTableStyle() {
  11. const rowClass: RowClassGetter = ({ columns, rowData, rowIndex }) => {
  12. const classes: string[] = []
  13. if (rowIndex <= 1) {
  14. classes.push('bg-gray')
  15. }
  16. if (rowIndex === 1) {
  17. classes.push('underline-red')
  18. }
  19. return classes.join(' ')
  20. }
  21. const cellClass: CellClassGetter = ({
  22. column,
  23. columns,
  24. columnIndex,
  25. rowData,
  26. rowIndex,
  27. }) => {
  28. const classes: string[] = [defaultCellClass]
  29. if (['4/243', '0/6'].includes(rowData[column.columnName])) {
  30. classes.push('cell-warning')
  31. }
  32. if (['5/357'].includes(rowData[column.columnName])) {
  33. classes.push('cell-error')
  34. }
  35. if (['flightNO'].includes(column.columnName)) {
  36. classes.push('cell-click')
  37. }
  38. return classes.join(' ')
  39. }
  40. return {
  41. rowClass,
  42. cellClass,
  43. }
  44. }