fixed-column.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <el-table :data="tableData" style="width: 100%">
  3. <el-table-column fixed prop="date" label="Date" width="150" />
  4. <el-table-column prop="name" label="Name" width="120" />
  5. <el-table-column prop="state" label="State" width="120" />
  6. <el-table-column prop="city" label="City" width="120" />
  7. <el-table-column prop="address" label="Address" width="600" />
  8. <el-table-column prop="zip" label="Zip" width="120" />
  9. <el-table-column fixed="right" label="Operations" width="120">
  10. <template #default>
  11. <el-button link type="primary" size="small" @click="handleClick">Detail</el-button>
  12. <el-button link type="primary" size="small">Edit</el-button>
  13. </template>
  14. </el-table-column>
  15. </el-table>
  16. </template>
  17. <script lang="ts" setup>
  18. const handleClick = () => {
  19. console.log('click')
  20. }
  21. const tableData = [
  22. {
  23. date: '2016-05-03',
  24. name: 'Tom',
  25. state: 'California',
  26. city: 'Los Angeles',
  27. address: 'No. 189, Grove St, Los Angeles',
  28. zip: 'CA 90036',
  29. tag: 'Home',
  30. },
  31. {
  32. date: '2016-05-02',
  33. name: 'Tom',
  34. state: 'California',
  35. city: 'Los Angeles',
  36. address: 'No. 189, Grove St, Los Angeles',
  37. zip: 'CA 90036',
  38. tag: 'Office',
  39. },
  40. {
  41. date: '2016-05-04',
  42. name: 'Tom',
  43. state: 'California',
  44. city: 'Los Angeles',
  45. address: 'No. 189, Grove St, Los Angeles',
  46. zip: 'CA 90036',
  47. tag: 'Home',
  48. },
  49. {
  50. date: '2016-05-01',
  51. name: 'Tom',
  52. state: 'California',
  53. city: 'Los Angeles',
  54. address: 'No. 189, Grove St, Los Angeles',
  55. zip: 'CA 90036',
  56. tag: 'Office',
  57. },
  58. ]
  59. </script>