crud-form.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <basic-container>
  3. <h3>点击新增或编辑跳转到新的页面</h3>
  4. <avue-crud :option="option"
  5. :data="data">
  6. <template slot="menuLeft">
  7. <el-button type="primary"
  8. size="small"
  9. @click="handleForm()"
  10. icon="el-icon-plus">add</el-button>
  11. </template>
  12. <template slot="menu"
  13. slot-scope="{row}">
  14. <el-button size="small"
  15. type="text"
  16. @click="handleForm(row.id)"
  17. icon="el-icon-edit">edit</el-button>
  18. </template>
  19. </avue-crud>
  20. </basic-container>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. option: {
  27. addBtn: false,
  28. editBtn: false,
  29. column: [
  30. {
  31. label: "姓名",
  32. prop: "name"
  33. }
  34. ]
  35. },
  36. data: [
  37. {
  38. id: 1,
  39. name: "small"
  40. }
  41. ]
  42. };
  43. },
  44. methods: {
  45. handleForm(id) {
  46. this.$router.push({
  47. path: "/form-detail/index",
  48. query: {
  49. id: id
  50. }
  51. });
  52. }
  53. }
  54. };
  55. </script>
  56. <style>
  57. </style>