介绍
arco-crud 是基于现有的 arco-design 库进行的二次封装,从而简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对 table 表格和 form 表单场景,同时衍生出更多企业常用的组件,达到高复用,容易维护和扩展的框架,同时内置了丰富了数据展示组件,让开发变得更加容易.
浏览器兼容性
支持所有符合 ES5 标准的浏览器(不支持 IE8 及以下版本).
安装
通过 npm 安装
# 安装
npm i @lllgn/arco-crud -S
# 引入
import ArcoCrud from '@lllgn/arco-crud';
Vue.use(ArcoCrud);
Example
<template>
<div>
<acroCrud
: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>
</acroCrud>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from "vue";
import acroCrud from "../../components/crud/index.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: "薪资",
prop: "salary",
width: 120,
type: "slider",
formItemWidth: "300px",
showInput: true,
maxLength: 10000,
},
],
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 | | |
CrudOption (CRUD配置)
参数名 | 描述 | 类型 | 默认值 | 版本 |
---|
addBtn | 添加按钮 | boolean | true | |
addBtnText | 添加按钮 | 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 | "是否删除选中项" | |
CrudColumnsOption extends FormColumns (CRUD项配置继承自FormColumns)
参数名 | 描述 | 类型 | 默认值 | 版本 |
---|
searchFormShow | 显示在搜索表单中 | boolean | - | |
searchSlot | 搜索插槽 | boolean | - | |
formSlot | crud表单插槽 | boolean | - | |
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 | - | |
disabled | 是否禁用 | boolean | - | |
disabled | 是否隐藏 | 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 | 栅格占位格数 | number | - | |
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 | - | |
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 | - | |
DictProps (字典属性)
参数名 | 描述 | 类型 | 默认值 | 版本 |
---|
label | 文本 | string | - | |
value | 值 | string | - | |
Record (Record属性)
参数名 | 描述 | 类型 | 默认值 | 版本 |
---|
label | 文本 | string | - | |
value | 值 | number | - | |
Event(事件)
Crud Event
事件名 | 描述 | 参数 | 版本 |
---|
refresh | 点击刷新按钮时触发 | - | - |
searchChange | 搜索参数改变时触发 | searchForm:any | - |
rowUpdate | 修改时触发 | done,form | - |
rowSave | 修改时触发 | done,form | - |
rowDel | 修改时触发 | done,form | - |
Slots(插槽)
Crud Slots
插槽名 | 描述 | 参数 | 版本 |
---|
propSearch | 搜索栏插槽 插槽名:prop+'Search' | scope:{column} | - |
menuLeftStart | 菜单左侧前插槽 | - | - |
menuLeftEnd | 菜单左侧后插槽 | - | - |
menuRightStart | 菜单右侧前插槽 | - | - |
menuRightEnd | 菜单右侧后插槽 | - | - |
handleMenu | 操作栏后插槽 | scope:{ record } | - |
handleMenuBefore | 操作栏前插槽 | scope:{ record } | - |
prop | 表格Cell插槽 插槽名同prop | scope:{ record, column, rowIndex} | - |
License
Ths project is MIT licensed.