table-layout.vue 892 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <template>
  2. <el-radio-group v-model="tableLayout">
  3. <el-radio-button label="fixed" />
  4. <el-radio-button label="auto" />
  5. </el-radio-group>
  6. <el-table :data="tableData" :table-layout="tableLayout">
  7. <el-table-column prop="date" label="Date" />
  8. <el-table-column prop="name" label="Name" />
  9. <el-table-column prop="address" label="Address" />
  10. </el-table>
  11. </template>
  12. <script lang="ts" setup>
  13. import { ref } from 'vue'
  14. const tableLayout = ref('fixed')
  15. const tableData = [
  16. {
  17. date: '2016-05-03',
  18. name: 'Tom',
  19. address: 'No. 189, Grove St, Los Angeles',
  20. },
  21. {
  22. date: '2016-05-02',
  23. name: 'Tom',
  24. address: 'No. 189, Grove St, Los Angeles',
  25. },
  26. {
  27. date: '2016-05-04',
  28. name: 'Tom',
  29. address: 'No. 189, Grove St, Los Angeles',
  30. },
  31. {
  32. date: '2016-05-01',
  33. name: 'Tom',
  34. address: 'No. 189, Grove St, Los Angeles',
  35. },
  36. ]
  37. </script>