layout.vue 685 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. <script setup lang="ts">
  2. import { ref } from "vue";
  3. import { tableData } from "./data";
  4. type TableLayout = "fixed" | "auto";
  5. const tableLayout = ref<TableLayout>("fixed");
  6. const columns: TableColumnList = [
  7. {
  8. label: "日期",
  9. prop: "date"
  10. },
  11. {
  12. label: "姓名",
  13. prop: "name"
  14. },
  15. {
  16. label: "地址",
  17. prop: "address"
  18. }
  19. ];
  20. </script>
  21. <template>
  22. <div>
  23. <el-radio-group v-model="tableLayout">
  24. <el-radio-button label="fixed" value="fixed" />
  25. <el-radio-button label="auto" value="auto" />
  26. </el-radio-group>
  27. <pure-table
  28. :data="tableData"
  29. :columns="columns"
  30. :table-layout="tableLayout"
  31. />
  32. </div>
  33. </template>