• 自定义菜单
    • 普通用法

    自定义菜单

    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>