介绍
arco-crud 是基于现有的 arco-design 库进行的二次封装,从而简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对 table 表格和 form 表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易.
浏览器兼容性
支持所有符合 ES5 标准的浏览器(不支持 IE8 及以下版本).
安装
通过 npm 安装
# 安装
npm i @lllgn/arco-crud -S
# 引入
import ArcoCrud from '@lllgn/arco-crud';
// 引入CRUD样式
import '@lllgn/arco-crud/dist/style.css';
Vue.use(ArcoCrud);
Example
<template>
<div>
<arco-crud
:loading="loading"
:option="option"
:columns="columns"
:table-data="tableData"
@refresh="onRefresh"
@row-update="onUpdate"
@row-save="onSave"
@row-del="onDel"
>
<template #roadSearch>
<a-button type="primary">插槽1</a-button>
</template>
</arco-crud>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";
// 声明表单对象
const searchFormRef = ref(null);
const datas = reactive<{
// 加载状态
loading: boolean;
// 加载状态
option: any;
// crud列表项
columns: Array<any>;
// 表格数据
tableData: Array<any>;
}>({
loading: false,
option: {},
columns: [
{
label: "姓名",
prop: "name",
fixed: "left",
width: 140,
type: "input",
searchFormShow: true,
formItemWidth: "500px",
showWordLimit: true,
placeholder: "请输入姓名",
rules: [
{
required: true,
message: "请输入姓名",
trigger: "blur",
},
],
maxLength: 10,
},
{
label: "用户信息",
children: [
{
label: "生日",
prop: "birthday",
},
{
label: "性别",
prop: "sex",
type: "radio",
radioType: "button",
width: 140,
formItemWidth: "none",
showWordLimit: true,
dictData: [
{
label: "男",
value: "1",
},
{
label: "女",
value: "0",
},
{
label: "未知",
value: "2",
},
],
},
{
label: "爱好",
prop: "hobby",
type: "select",
width: 140,
showWordLimit: true,
dictData: [
{
label: "足球",
value: "1",
},
{
label: "舞蹈",
value: "0",
},
{
label: "音乐",
value: "2",
},
],
},
{
label: "地址",
children: [
{
label: "城市",
},
{
label: "街道",
prop: "road",
},
{
label: "门牌",
prop: "no",
},
],
},
{
label: "街道",
prop: "road",
type: "input",
searchFormShow: true,
searchSlot: true,
},
],
},
{
label: "信息",
children: [
{
label: "电子邮箱",
prop: "email",
},
{
label: "电话",
prop: "phone",
},
],
},
{
label: "薪资",
type: "input",
prop: "salary",
width: 120,
formItemWidth: "300px",
},
],
tableData: [
{
key: "1",
name: "Jane Doe",
salary: 2300,
birthday: "1994-04-21",
city: "London",
road: "Park",
hobby: "1",
sex: "1",
no: "34",
phone: "12345678",
email: "jane.doe@example.com",
},
{
key: "2",
name: "Alisa Ross",
salary: 2500,
birthday: "1994-05-21",
city: "London",
road: "Park",
sex: "0",
hobby: "0",
no: "37",
phone: "12345678",
email: "alisa.ross@example.com",
},
{
key: "3",
name: "Kevin Sandra",
salary: 2200,
birthday: "1992-02-11",
city: "Paris",
road: "Arco",
sex: "0",
hobby: "0",
no: "67",
phone: "12345678",
email: "kevin.sandra@example.com",
},
{
key: "4",
name: "Ed Hellen",
salary: 1700,
birthday: "1991-06-21",
city: "London",
road: "Park",
no: "317",
sex: "1",
hobby: "1",
phone: "12345678",
email: "ed.hellen@example.com",
},
{
key: "5",
name: "William Smith",
salary: 2700,
birthday: "1996-08-21",
city: "Paris",
road: "Park",
sex: "1",
no: "114",
phone: "12345678",
email: "william.smith@example.com",
},
],
});
// 抛出数据到渲染层
const { loading, option, columns, tableData } = toRefs(datas);
// 保存
const onSave = (done: any, row: any) => {
setTimeout(() => {
done();
}, 2000);
};
// 删除
const onDel = (done: any, row: any) => {
setTimeout(() => {
done();
}, 2000);
};
// 更新
const onUpdate = (done: any, row: any) => {
setTimeout(() => {
done();
}, 2000);
};
// 刷新
const onRefresh = () => {};
</script>
API
Props
CrudProp (CRUD属性)
参数名 |
描述 |
类型 |
默认值 |
版本 |
option |
配置 |
CrudOption |
|
|
columns |
表格项 |
Array<CrudColumnsOption>
|
|
|
tableData |
表格数据 |
Array<any>
|
|
|
loading |
加载状态 |
boolean |
|
|
formData |
表单数据 |
any |
|
|
pagination |
分页参数 |
PaginationProps |
|
0.0.41 |
searchOption |
搜索表单配置 |
FormOptions |
|
0.0.52 |
formOption |
表单配置 |
FormOptions |
|
0.0.52 |
beforeAddModalOpen |
打开新增表单前 |
Function |
|
0.0.52 |
beforeEditModalOpen |
打开编辑表单前 |
Function |
|
0.0.52 |
beforeCloseModalOpen |
打开关闭表单前 |
Function |
|
0.0.52 |
CrudOption (CRUD配置)
参数名 |
描述 |
类型 |
默认值 |
版本 |
addBtn |
添加按钮 |
boolean |
true |
|
addBtnText |
添加按钮文本 |
string |
"新增" |
|
editBtn |
编辑按钮 |
boolean |
true |
|
editBtnText |
编辑按钮文本 |
string |
"编辑" |
|
delBtn |
删除按钮 |
boolean |
true |
|
delBtnText |
删除按钮文本 |
string |
"删除" |
|
headerBtn |
选择表头按钮 |
boolean |
true |
|
refreshBtn |
刷新按钮 |
boolean |
true |
|
handleMenu |
操作菜单 |
boolean |
true |
|
handleMenuWidth |
操作菜单宽度 |
number |
200 |
|
handleMenuAlign |
操作菜单对齐 |
string |
"center" |
|
modalWidth |
对话框宽度 |
string |
"50%" |
|
modalTop |
对话框高度 |
string |
"20%" |
|
modalAddTitle |
添加对话框标题 |
string |
"新增" |
|
modalEditTitle |
编辑对话框标题 |
string |
"编辑" |
|
modalAlignCenter |
对话框是否居中显示 |
boolean |
false |
|
modalAddOkText |
对话框确认按钮的内容-新增 |
string |
"确定新增" |
|
modalEditOkText |
对话框确认按钮的内容-编辑 |
string |
"确定修改" |
|
modalCanceText |
对话框取消按钮的内容 |
string |
"取消" |
|
delModalText |
删除对话框内容 |
string |
"是否删除选中项" |
|
defaultSort |
默认排序 |
number |
99 |
|
defaultAlign |
默认排列 |
"left" , "center" , "right" |
"center" |
|
defaultWidth |
默认宽度 |
number |
"150" |
|
CrudColumnsOption extends FormColumns (CRUD项配置继承自FormColumns)
参数名 |
描述 |
类型 |
默认值 |
版本 |
searchFormShow |
显示在搜索表单中 |
boolean |
- |
|
searchSlot |
搜索插槽 |
boolean |
- |
|
searchSort |
搜索栏排序 |
number |
- |
|
formSlot |
crud表单插槽 |
boolean |
- |
|
formSort |
表单排序 |
number |
- |
|
addFormHide |
添加表单隐藏 |
boolean |
- |
|
addDisabled |
添加表单不可用 |
boolean |
- |
|
editFormHide |
编辑表单隐藏 |
boolean |
- |
|
editDisabled |
编辑表单不可用 |
boolean |
- |
|
children |
子集 |
Array<CrudColumnsOption>
|
- |
|
slotName |
设置当前列的渲染插槽的名字。插槽参数同#cell |
Array<CrudColumnsOption>
|
- |
|
titleSlotName |
设置当前列的标题的渲染插槽的名字 |
string |
- |
|
fixed |
固定位置 |
'left' , 'right' |
- |
|
align |
对齐方向 |
'left' , 'center' , 'right' |
- |
|
width |
表格列宽 |
number |
- |
|
FormColumns (表单项配置)
参数名 |
描述 |
类型 |
默认值 |
版本 |
value |
默认值(非受控模式) |
any |
- |
|
type |
类型 |
string |
- |
|
label |
文本 |
string |
- |
|
prop |
字段名 |
string |
- |
|
slot |
插槽 |
boolean |
- |
|
sort |
排序 |
number |
- |
|
disabled |
是否禁用 |
boolean |
- |
|
hide |
是否隐藏 |
boolean |
- |
|
dictProps |
字典属性 |
DictProps |
- |
|
dictData |
字典数据 |
Array<any>
|
- |
|
help |
帮助文案 |
string |
- |
|
extra |
额外显示的文案 |
string |
- |
|
required |
是否必须填写 |
boolean |
- |
|
rules |
表单项校验规则 |
Array<any>
|
- |
|
hideLabel |
是否隐藏标签 |
boolean |
- |
|
hideAsterisk |
是否隐藏星号 |
boolean |
- |
|
formItemWidth |
项宽度 |
number ,string |
- |
|
flex |
布局属性 |
number , string , "initial" , "auto", "none" |
- |
span |
maxLength |
最大长度 |
number |
- |
|
minLength |
最小长度 |
number |
- |
|
showWordLimit |
input-是否显示字数统计 |
boolean |
- |
|
placeholder |
提示文字 |
string |
- |
|
mode |
input-number模式(embed:按钮内嵌模式,button:左右按钮模式 |
"embed","button" |
- |
|
precision |
input-number 数字精度 |
number |
- |
|
step |
input-number 数字变化步长 |
number |
- |
|
formatter |
input-number 定义输入框展示值 |
any |
- |
|
direction |
radio-group 单选框组的方向 |
"horizontal","vertical" |
- |
|
radioType |
radio-group 单选框组的类型 |
"radio" , "button" |
- |
|
marks |
slider设置显示的标签 |
Array<Record>
|
- |
|
showTicks |
slider是否显示刻度线 |
boolean |
- |
|
showInput |
slider是否显示输入框 |
boolean |
- |
|
range |
slider是否开启范围选择 |
boolean |
- |
|
multiple |
select是否开启多选模式 |
boolean |
- |
|
cascader |
cascader是否开启严格选择模式 |
boolean |
0.0.47 |
|
defaultInputValue |
输入框的默认值(非受控模式 |
string |
- |
|
valueFormat |
picker 值的格式 |
string |
- |
|
disabledDate |
picker不可选取的日期 |
any |
- |
|
disabledTime |
picker不可选取的时间 |
any |
- |
|
showTime |
picker是否增加时间选择 |
boolean |
- |
|
format |
picker 格式 |
string |
- |
|
disabledHours |
time 禁用的部分小时选项 |
any |
- |
|
disabledMinutes |
time 禁用的部分秒数选项 |
any |
- |
|
disabledMinutes |
time 禁用的部分秒数选项 |
any |
- |
|
use12Hours |
time 12 小时制 |
boolean |
- |
|
FormOptions (表单配置)
参数名 |
描述 |
类型 |
默认值 |
版本 |
layout |
表单的布局方式,包括水平、垂直、多列 |
"horizontal" , "vertical" , "inline" |
- |
|
size |
表单控件的尺寸 |
"mini" , "small" , "medium" , "large" |
- |
|
labelColProps |
标签元素布局选项。参数同'col'组件一致 |
object |
- |
|
wrapperColProps |
表单控件布局选项。参数同'col'组件一致 |
object |
- |
|
labelAlign |
标签的对齐方向 |
"left" , "right" |
- |
|
disabled |
是否禁用表单 |
boolean |
- |
|
autoLabelWidth |
是否开启自动标签宽度,仅在 layout="horizontal" 下生效 |
boolean |
- |
|
width |
表单宽度 |
string |
- |
|
showColon |
是否显示冒号 |
boolean |
- |
|
padding |
间距 |
string |
- |
|
showButton |
显示按钮 |
boolean |
- |
|
submitButtonText |
提交按钮文本 |
string |
- |
|
resetButtonText |
重置按钮文本 |
string |
- |
|
itemWidth |
默认项宽 |
string |
- |
|
DictProps (字典属性)
参数名 |
描述 |
类型 |
默认值 |
版本 |
label |
文本 |
string |
- |
|
value |
值 |
string |
- |
|
Record (Record属性)
参数名 |
描述 |
类型 |
默认值 |
版本 |
label |
文本 |
string |
- |
|
value |
值 |
number |
- |
|
Event(事件)
Crud Event
事件名 |
描述 |
参数 |
版本 |
refresh |
点击刷新按钮时触发 |
- |
- |
search |
点击搜按钮时触发 |
searchForm:any |
- |
rowUpdate |
修改时触发 |
done,form |
- |
rowSave |
修改时触发 |
done,form |
- |
rowDel |
修改时触发 |
done,form |
- |
expand |
点击展开行时触发 |
rowKey: string |
0.0.41 |
expanded-change |
已展开的数据行发生改变时触发 |
rowKeys: string[] |
0.0.41 |
select |
点击行选择器时触发 |
rowKeys: string[],rowKey: string |
0.0.41 |
select-all |
点击全选选择器时触发 |
checked: boolean |
0.0.41 |
selection-change |
已选择的数据行发生改变时触发 |
rowKeys: string[] |
0.0.41 |
sorter-change |
排序规则发生改变时触发 |
dataIndex: string,direction: string |
0.0.41 |
filter-change |
过滤选项发生改变时触发 |
dataIndex: string,filteredValues: string[] |
0.0.41 |
page-change |
表格分页发生改变时触发 |
page: number |
0.0.41 |
page-size-change |
表格每页数据数量发生改变时触发 |
pageSize: number |
0.0.41 |
change |
表格数据发生变化时触发 |
data: TableData[],extra: TableChangeExtra |
0.0.41 |
cell-click |
点击单元格时触发 |
record: TableData,column: TableColumnData |
0.0.41 |
row-click |
点击行数据时触发 |
record: TableData |
0.0.41 |
header-click |
点击表头数据时触发 |
column: TableColumnData |
0.0.41 |
form-column-input |
表单项input值改变时触发 |
prop:string,val: any,index:number,item:any |
0.0.43 |
form-column-focus |
表单项获得焦点时触发 |
prop:string,val: any,index:number,item:any |
0.0.43 |
form-column-blur |
表单项失去焦点时触发 |
prop:string,val: any,index:number,item:any |
0.0.43 |
form-column-change |
表单项值改变 |
prop:string,val: any,index:number,item:any |
0.0.43 |
Slots(插槽)
Crud Slots
插槽名 |
描述 |
参数 |
版本 |
[prop]Search |
搜索栏插槽 插槽名:prop+'Search' |
scope:{column} |
- |
menuLeftStart |
菜单左侧前插槽 |
- |
- |
menuLeftEnd |
菜单左侧后插槽 |
- |
- |
menuRightStart |
菜单右侧前插槽 |
- |
- |
menuRightEnd |
菜单右侧后插槽 |
- |
- |
handleMenu |
操作栏后插槽 |
scope:{ record } |
- |
handleMenuMiddle |
操作栏中间插槽 |
scope:{ record } |
- |
handleMenuBefore |
操作栏前插槽 |
scope:{ record } |
- |
prop |
表格Cell插槽 插槽名同prop |
scope:{ record, column, rowIndex} |
- |
License
Ths project is MIT licensed.