• 自定按钮
    • 普通用法

    自定按钮

    TIP

    1.0.0+

    普通用法

    自定义按钮 - 图1

    按钮的显隐全部接受Boolean类型的值;columnBtn为列动态显隐按钮;refreshBtn刷新按钮;addBtn表格新增按钮;editBtn行编辑按钮;delBtn行删除按钮;自定义按钮调用组件中对应方法即可,例如编辑方法rowEdit

    1. <avue-crud :data="data" :option="option" ref="crud">
    2.   <template slot-scope="scope" slot="menuLeft">
    3.     <el-button type="danger"
    4.       icon="el-icon-plus"
    5.       size="small"
    6.       plain
    7.       @click.stop="handleAdd()">新增</el-button>
    8.   </template>
    9.   <template slot-scope="scope" slot="menu">
    10.      <el-button type="primary"
    11.                      icon="el-icon-check"
    12.                      size="small"
    13.                      plain
    14.                      @click.stop="handleEdit(scope.row,scope.index)">编辑</el-button>
    15.   </template>
    16. </avue-crud>
    18. <script>
    19. export default {
    20.     data() {
    21.       return {
    22.         data: [
    23.           {
    24.             name:'张三',
    25.             sex:'男'
    26.           }, {
    27.             name:'李四',
    28.             sex:'女'
    29.           }
    30.         ],
    31.         option:{
    32.           columnBtn:false,
    33.           refreshBtn:false,
    34.           addBtn:false,
    35.           delBtn:false,
    36.           editBtn:false,
    37.           page:false,
    38.           align:'center',
    39.           menuAlign:'center',
    40.           column:[
    41.              {
    42.               label:'姓名',
    43.               prop:'name'
    44.             }, {
    45.               label:'性别',
    46.               prop:'sex'
    47.             }
    48.           ]
    49.         },
    50.       };
    51.     },
    52.     methods:{
    53.       handleAdd(){
    54.         this.$refs.crud.rowAdd();
    55.       },
    56.       handleEdit (row, index) {
    57.         this.$refs.crud.rowEdit(row, index);
    58.       },
    59.     }
    60. }
    61. </script>