DemoFather.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div>
  3. <div>
  4. <el-table :data="myUser">
  5. <el-table-column label="name" prop="name"></el-table-column>
  6. <el-table-column label="age" prop="age"></el-table-column>
  7. <el-table-column>
  8. <template scope="scope">
  9. <el-button type="primary">主要按钮</el-button>
  10. </template>
  11. </el-table-column>
  12. </el-table>
  13. </div>
  14. <DemoChildren :user="myUser" @sendMessageToFather="handlerTitle"></DemoChildren>
  15. </div>
  16. </template>
  17. <script>
  18. import DemoChildren from "./DemoChildren"
  19. export default {
  20. name: "DemoFather",
  21. components: {
  22. DemoChildren
  23. },
  24. data () {
  25. return {
  26. myUser: [
  27. {id: null, name: 'lz', age: 12},
  28. {id: 1, name: 'lz', age: 12},
  29. {id: 2, name: 'lz', age: 12},
  30. {id: 3, name: 'lz', age: 12},
  31. {id: null, name: 'lz', age: 12}
  32. ]
  33. }
  34. },
  35. methods: {
  36. handlerTitle(title) {
  37. for (const element of this.myUser) {
  38. element.name = title
  39. }
  40. }
  41. }
  42. }
  43. </script>
  44. <style scoped>
  45. </style>