按钮自定义

自定义新增按钮

效果预览可直接操作下方示例

这里利用了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="addRow">新增</el-button>
    </template>
  </avue-crud>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = {
  addBtn: false,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
};

const crud = ref(null);

function addRow () {
  if (crud.value) {
    crud.value.rowAdd();
  } else {
    ElMessage.error('CRUD组件未加载');
  }
}
</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="rowEdit(row, index)">编辑</el-button>
      <el-button type="success"
                 :size="size"
                 icon="el-icon-delete"
                 @click="rowDel(row, index)">删除</el-button>
    </template>
  </avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = {
  delBtn: false,
  editBtn: false,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
};

const crud = ref(null);

function rowEdit (row, index) {
  if (crud.value) {
    crud.value.rowEdit(row, index);
  }
}

function rowDel (row, index) {
  if (crud.value) {
    crud.value.rowDel(row, index);
  }
}
</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="rowView(row, index)">查看</el-button>
    </template>
  </avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = {
  delBtn: false,
  editBtn: false,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
};

const crud = ref(null);

function rowView (row, index) {
  if (crud.value) {
    crud.value.rowView(row, index);
  }
}
</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="rowSave">自定义新增</el-button>
      <el-button type="primary"
                 icon="el-icon-check"
                 v-if="type === 'edit'"
                 @click="rowUpdate">自定义修改</el-button>
      <el-button type="primary"
                 icon="el-icon-check"
                 @click="closeDialog">取消</el-button>
    </template>
  </avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = {
  saveBtn: false,
  updateBtn: false,
  cancelBtn: false,
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
};

const crud = ref(null);

function rowSave () {
  if (crud.value) {
    crud.value.rowSave();
  }
}

function rowUpdate () {
  if (crud.value) {
    crud.value.rowUpdate();
  }
}

function closeDialog () {
  if (crud.value) {
    crud.value.closeDialog();
  }
}
</script>