mirror of https://github.com/certd/certd
🔱: [client] sync upgrade with 2 commits [trident-sync]
perf: editable row 优化添加pull/91/head
parent
7008a408ca
commit
27a9fc32a6
|
@ -682,6 +682,12 @@ export const crudResources = [
|
|||
name: "EditableSubCrud",
|
||||
path: "/crud/editable/sub-crud",
|
||||
component: "/crud/editable/sub-crud/index.vue"
|
||||
},
|
||||
{
|
||||
title: "行编辑VModel",
|
||||
name: "EditableRowVModel",
|
||||
path: "/crud/editable/menus",
|
||||
component: "/crud/editable/menus/index.vue"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
@ -0,0 +1,107 @@
|
|||
import * as api from "./api";
|
||||
import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
|
||||
import { nextTick, ref } from "vue";
|
||||
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
let idGen = 1;
|
||||
function nextId() {
|
||||
return idGen++;
|
||||
}
|
||||
const { crudBinding } = crudExpose;
|
||||
const expandedRowKeys = ref([]);
|
||||
return {
|
||||
crudOptions: {
|
||||
//将 addRow 按钮启用
|
||||
actionbar: {
|
||||
buttons: {
|
||||
add: { show: false },
|
||||
addRow: {
|
||||
show: true,
|
||||
click: async () => {
|
||||
crudExpose.editable.addRow({
|
||||
active: true,
|
||||
addRowFunc: () => {
|
||||
const row = { id: nextId() };
|
||||
crudBinding.value.data.push(row);
|
||||
return row;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
name: "local",
|
||||
isMergeWhenUpdate: true,
|
||||
isAppendWhenAdd: true
|
||||
},
|
||||
table: {
|
||||
expandedRowKeys: expandedRowKeys,
|
||||
"onUpdate:expandedRowKeys": (keys: any) => {
|
||||
expandedRowKeys.value = keys;
|
||||
},
|
||||
editable: {
|
||||
enabled: true,
|
||||
mode: "row",
|
||||
// activeDefault: true,
|
||||
exclusive: true, //排他式激活
|
||||
exclusiveEffect: "save" //排他式激活时,其他行的编辑状态的处理方式
|
||||
}
|
||||
},
|
||||
rowHandle: {
|
||||
width: 350,
|
||||
group: {
|
||||
editRow: {
|
||||
addChild: {
|
||||
text: "添加子菜单",
|
||||
click: async ({ row }) => {
|
||||
const newRow = { id: nextId(), parentId: row.id };
|
||||
if (!row.children) {
|
||||
row.children = [];
|
||||
}
|
||||
crudExpose.editable.addRow({
|
||||
active: true,
|
||||
addRowFunc: () => {
|
||||
expandedRowKeys.value.push(row.id);
|
||||
row.children.push(newRow);
|
||||
return newRow;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
type: "number",
|
||||
form: {
|
||||
show: false
|
||||
},
|
||||
column: { width: 80, align: "center" }
|
||||
},
|
||||
title: {
|
||||
title: "标题",
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ required: true, message: "请输入标题" }]
|
||||
}
|
||||
},
|
||||
icon: {
|
||||
title: "图标",
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ required: true, message: "请选择图标" }]
|
||||
}
|
||||
},
|
||||
link: {
|
||||
title: "链接",
|
||||
type: "link",
|
||||
form: {
|
||||
rules: [{ required: true, message: "请输入链接" }]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
vModel+行编辑
|
||||
<span class="sub">在表格内编辑每行数据</span>
|
||||
</div>
|
||||
<div class="more"><a target="_blank" href="http://fast-crud.docmirror.cn/api/crud-options/table.html#editable">文档</a></div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right> </template>
|
||||
</fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from "vue";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
|
||||
defineOptions({
|
||||
name: "EditableRowVModel"
|
||||
});
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
// crudExpose.doRefresh();
|
||||
crudExpose.crudBinding.value.data = [];
|
||||
// crudExpose.editable.enable({});
|
||||
});
|
||||
</script>
|
Loading…
Reference in New Issue