按钮自定义

自定义新增按钮

暂无数据

这里利用了menu-left卡槽,同时设置addBtn为false，调用内置的新增打开弹窗方法rowAdd

<template>
  <avue-crud :data="data"
             :option="option"
             ref="crud">
    <template #menu-left="{}">
      <el-button type="danger"
                 icon="el-icon-plus"
                 @click="$refs.crud.rowAdd()">新增</el-button>
    </template>
  </avue-crud>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        addBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

自定义编辑和删除按钮

暂无数据

这里利用了menu卡槽,同时设置editBtn和delBtn为false，调用内置的编辑和删除方法rowEdit和rowDel,这里需要传入卡槽返回的2个值{row,index}当前行的数据和当前行的序号

<template>
  <avue-crud :data="data"
             :option="option"
             ref="crud">
    <template #menu="{row,index,size}">
      <el-button type="danger"
                 :size="size"
                 icon="el-icon-edit"
                 @click="$refs.crud.rowEdit(row,index)">编辑</el-button>
      <el-button type="success"
                 :size="size"
                 icon="el-icon-delete"
                 @click="$refs.crud.rowDel(row,index)">删除</el-button>
    </template>
  </avue-crud>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        delBtn: false,
        editBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

自定义查看按钮

暂无数据

这里利用了menu卡槽,调用内置查看方法rowView,这里需要传入卡槽返回的2个值{row,index}当前行的数据和当前行的序号

<template>
  <avue-crud :data="data"
             :option="option"
             ref="crud">
    <template #menu="{row,index,size}">
      <el-button type="success"
                 icon="el-icon-delete"
                 :size="size"
                 @click="$refs.crud.rowView(row,index)">查看</el-button>
    </template>
  </avue-crud>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        delBtn: false,
        editBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

自定义弹窗内按钮

暂无数据

新增和更新按钮要根据返回的type值判断，在menu-form卡槽中自定义按钮，调用内置方法即可

<template>
  <avue-crud :data="data"
             :option="option"
             ref="crud">
    <template #menu-form-before="{row,index,type}">
      <el-tag type="primary"
              :size="size">提示</el-tag>
    </template>
    <template #menu-form="{row,index,type}">
      <el-button type="primary"
                 icon="el-icon-check"
                 v-if="type=='add'"
                 @click="$refs.crud.rowSave()">自定义新增</el-button>
      <el-button type="primary"
                 icon="el-icon-check"
                 v-if="type=='edit'"
                 @click="$refs.crud.rowUpdate()">自定义修改</el-button>
      <el-button type="primary"
                 icon="el-icon-check"
                 @click="$refs.crud.closeDialog()">取消</el-button>
    </template>
  </avue-crud>
</template>

<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        saveBtn: false,
        updateBtn: false,
        cancelBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>

显示代码复制代码复制代码