自定义菜单

TIP

1.0.0+

普通用法

自定义菜单 - 图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>
  10. <script>
  11. export default {
  12.     data() {
  13.       return {
  14.         data: [
  15.           {
  16.             name:'张三',
  17.             sex:'男'
  18.           }, {
  19.             name:'李四',
  20.             sex:'女'
  21.           }
  22.         ],
  23.         option:{
  24.           page:false,
  25.           align:'center',
  26.           menuAlign:'center',
  27.           column:[
  28.              {
  29.               label:'姓名',
  30.               prop:'name'
  31.             }, {
  32.               label:'性别',
  33.               prop:'sex'
  34.             }
  35.           ]
  36.         },
  37.       };
  38.     },
  39.     methods: {
  40.       rowSave(form,done){
  41.         this.$message.success('新增数据'+ JSON.stringify(form));
  42.         done();
  43.       },
  44.       rowDel(form,index){
  45.         this.$message.success('删除数据'+ JSON.stringify(form));
  46.       },
  47.       rowUpdate(form,index,done){
  48.         this.$message.success('编辑数据'+ JSON.stringify(form)+'数据序号'+index);
  49.         done();
  50.       },
  51.     }
  52. }
  53. </script>