提示

可以参考自定义按钮更加灵活

新增数据

vue2

vue3

暂无数据

新增数据保存回调`rowSave`方法,执行`done`关闭当前表单,`loading`用于添加失败后不关闭弹窗，重新提交

<template>
  <tvue-crud :data="data"
             :option="option"
             @row-save="rowSave"></tvue-crud>
</template>

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

// 数据定义
const data = ref([
  { id: 1, name: '张三', sex: '男' },
  { id: 2, name: '李四', sex: '女' }
]);

const option = ref({
  editBtn: false,
  delBtn: false,
  addBtnText: '新增数据',
  addBtnIcon: 'el-icon-user',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

const rowSave = (form, done, loading) => {
  ElMessage.success('模拟网络请求');
  form.id = new Date().getTime()
  setTimeout(() => {
    ElMessage.success('关闭按钮等待');
    loading();
  }, 1000);

  setTimeout(() => {
    ElMessage.success('新增数据: ' + JSON.stringify(form));
    done(form);
  }, 2000);
};
</script>

修改数据

vue2

vue3

暂无数据

修改数据保存回调`rowUpdate`方法,执行`done`关闭当前表单,`loading`用于添加失败后不关闭弹窗，重新提交

<template>
  <tvue-crud :data="data"
             :option="option"
             @row-update="rowUpdate"></tvue-crud>
</template>

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

// 数据定义
const data = ref([
  { id: 1, name: '张三', sex: '男' },
  { id: 2, name: '李四', sex: '女' }
]);

const option = ref({
  addBtn: false,
  delBtn: false,
  editBtnText: '修改数据',
  editBtnIcon: 'el-icon-user',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

// 编辑数据处理
const rowUpdate = (form, index, done, loading) => {
  ElMessage.success('模拟网络请求');

  setTimeout(() => {
    ElMessage.success('关闭按钮等待');
    loading();
  }, 1000);

  setTimeout(() => {
    ElMessage.success(`编辑数据 ${JSON.stringify(form)} 数据序号 ${index}`);
    done(form);
  }, 2000);
};
</script>

删除数据

vue2

vue3

暂无数据

修改数据保存回调`rowDel`方法

<template>
  <tvue-crud :data="data"
             :option="option"
             @row-del="rowDel"></tvue-crud>
</template>

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

// 数据定义
const data = ref([
  { id: 1, name: '张三', sex: '男' },
  { id: 2, name: '李四', sex: '女' }
]);

const option = ref({
  editBtn: false,
  addBtn: false,
  delBtnText: '删除数据',
  delBtnIcon: 'el-icon-user',
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

// 删除处理
const rowDel = (form, index) => {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功!');
  }).catch(() => { });
};
</script>

刷新数据

提示

这里刷新按钮回调可以配合分页参数和方法去请求数据

vue2

vue3

暂无数据

点击刷新按钮回调`refresh-change`方法

<template>
  <tvue-crud :data="data"
             :option="option"
             @refresh-change="refreshChange"></tvue-crud>
</template>

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

// 数据定义
const data = ref([
  { id: 1, name: '张三', sex: '男' },
  { id: 2, name: '李四', sex: '女' }
]);

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

// 刷新回调处理
const refreshChange = () => {
  ElMessage.success('刷新回调');
};
</script>

综合用法

vue2

vue3

暂无数据

在操作过程中吧数据放入`done`中,可以直接修改本地数据，做到及时刷新

<template>
  <tvue-crud :data="data"
             :option="option"
             @refresh-change="refreshChange"
             @row-save="rowSave"
             @row-update="rowUpdate"
             @row-del="rowDel"></tvue-crud>
</template>

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

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

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

const refreshChange = () => {
  ElMessage.success('刷新回调');
};

const rowSave = (form, done, loading) => {
  form.id = new Date().getTime();
  ElMessage.success('模拟网络请求');

  setTimeout(() => {
    ElMessage.success('关闭按钮等待');
    loading();
  }, 1000);

  setTimeout(() => {
    ElMessage.success('新增数据: ' + JSON.stringify(form));
    done(form);
  }, 2000);
};

const rowDel = (form, index, done) => {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    done(form);
    ElMessage.success('删除成功!');
  }).catch(() => { });
};

const rowUpdate = (form, index, done, loading) => {
  ElMessage.success('模拟网络请求');

  setTimeout(() => {
    ElMessage.success('关闭按钮等待');
    loading();
  }, 1000);

  setTimeout(() => {
    ElMessage.success('编辑数据: ' + JSON.stringify(form) + ' 数据序号: ' + index);
    done(form);
  }, 2000);
};
</script>