columns.tsx 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import Print from "@/utils/print";
  2. import { ref, type Ref } from "vue";
  3. import { tableDataEdit } from "../data";
  4. import { clone } from "@pureadmin/utils";
  5. export function useColumns(printRef: Ref) {
  6. const dataList = ref(clone(tableDataEdit, true));
  7. const columns: TableColumnList = [
  8. {
  9. label: "ID",
  10. prop: "id"
  11. },
  12. {
  13. label: "日期",
  14. prop: "date"
  15. },
  16. {
  17. label: "姓名",
  18. prop: "name"
  19. },
  20. {
  21. label: "地址",
  22. prop: "address"
  23. }
  24. ];
  25. const print = () => {
  26. Print(printRef.value.getTableDoms().tableWrapper).toPrint;
  27. };
  28. function cellStyle({ column: { property }, rowIndex }) {
  29. if (property === "id") {
  30. return rowIndex < 3
  31. ? { background: "#87baf9" }
  32. : { background: "#87e8de" };
  33. }
  34. }
  35. function headerCellStyle({ columnIndex }) {
  36. return columnIndex === 0
  37. ? { background: "#f3b2d0" }
  38. : { background: "#fafafa" };
  39. }
  40. function rowStyle({ rowIndex }) {
  41. return rowIndex % 2 === 1
  42. ? { background: "#ffa39e" }
  43. : { background: "#91d5ff" };
  44. }
  45. return {
  46. columns,
  47. dataList,
  48. print,
  49. rowStyle,
  50. cellStyle,
  51. headerCellStyle
  52. };
  53. }