test.html 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <el-table
  3. :data="tableData"
  4. style="width: 100%; margin-bottom: 20px"
  5. row-key="id"
  6. border
  7. default-expand-all>
  8. <el-table-column prop="date" label="Date"></el-table-column>
  9. <el-table-column prop="name" label="Name">
  10. <template #default="scope">
  11. 打豆豆{{scope.row}}
  12. </template>
  13. </el-table-column>
  14. <el-table-column prop="address" label="Address"></el-table-column>
  15. </el-table>
  16. </template>
  17. <script>
  18. export default{
  19. data:{
  20. tableData: [
  21. {
  22. id: 1,
  23. date: '2016-05-02',
  24. name: 'wangxiaohu',
  25. address: 'No. 189, Grove St, Los Angeles',
  26. },
  27. {
  28. id: 2,
  29. date: '2016-05-04',
  30. name: 'wangxiaohu',
  31. address: 'No. 189, Grove St, Los Angeles',
  32. },
  33. {
  34. id: 3,
  35. date: '2016-05-01',
  36. name: 'wangxiaohu',
  37. address: 'No. 189, Grove St, Los Angeles',
  38. children: [
  39. {
  40. id: 31,
  41. date: '2016-05-01',
  42. name: 'wangxiaohu',
  43. address: 'No. 189, Grove St, Los Angeles',
  44. },
  45. {
  46. id: 32,
  47. date: '2016-05-01',
  48. name: 'wangxiaohu',
  49. address: 'No. 189, Grove St, Los Angeles',
  50. },
  51. ],
  52. },
  53. {
  54. id: 4,
  55. date: '2016-05-03',
  56. name: 'wangxiaohu',
  57. address: 'No. 189, Grove St, Los Angeles',
  58. },
  59. ]
  60. },
  61. methods: {
  62. }
  63. }
  64. </script>
  65. <style>
  66. </style>