Crud 模块

自定义菜单

自定义菜单 - 图1

配置slot卡槽为menuLeft为表单菜单左边位置,卡槽为menuRight为表格菜单右边的位置

  1. <avue-crud :data="data" :option="option">
  2. <template slot="menuLeft">
  3. <el-button type="primary" size="small">自定义按钮</el-button>
  4. </template>
  5. <template slot="menuRight">
  6. <el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>
  7. </template>
  8. </avue-crud>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. data: [
  14. {
  15. name:'张三',
  16. sex:'男'
  17. }, {
  18. name:'李四',
  19. sex:'女'
  20. }
  21. ],
  22. option:{
  23. page:false,
  24. align:'center',
  25. menuAlign:'center',
  26. column:[
  27. {
  28. label:'姓名',
  29. prop:'name'
  30. }, {
  31. label:'性别',
  32. prop:'sex'
  33. }
  34. ]
  35. },
  36. };
  37. },
  38. methods: {
  39. rowSave(form,done){
  40. this.$message.success('新增数据'+ JSON.stringify(form));
  41. done();
  42. },
  43. rowDel(form,index){
  44. this.$message.success('删除数据'+ JSON.stringify(form));
  45. },
  46. rowUpdate(form,index,done){
  47. this.$message.success('编辑数据'+ JSON.stringify(form)+'数据序号'+index);
  48. done();
  49. },
  50. }
  51. }
  52. </script>