ideaz-element组件库核心组件ZCrud介绍上篇文章不少小伙伴对部分组件的功能和特性有不少疑问，因此，我觉得再
摘要
上篇文章不少小伙伴对部分组件的功能和特性有不少疑问，因此，我觉得再写一篇一张介绍下组件库的核心组件之一Crud，通过这篇文章，相信大家能够对组件库有更多的了解。
项目地址：github.com/NaiveSteven… 如果对您有帮助或有启发，欢迎您点个star，感谢您的支持。
FQ
业务稍微变化就没法用？
组件的增删改查操作都支持逻辑自定义处理。即使您不使用Crud组件内置的新增、编辑和查看详情等功能，您也可以使用查询表单和表格功能，数据获取等都完全支持自定义的。
举个例子：
您使用了ZCrud组件的筛选表单和表格功能（完全支持自定义，适配绝大多数增删改查业务场景），但是组件的背景（默认为el-card组件）不适配您的业务，您可以这样自定义（配置form-decorator和table-decorator）：
<z-crud
v-model:pagination="pagination"
v-model:data="tableData"
v-model:formData="formData"
:columns="columns"
:options="options"
:loading="loading"
:action="false"
:form-decorator="{ name: 'div', style: { border: '1px solid #e4e7ed', paddingTop: '18px' } }"
:table-decorator="{ name: 'el-card', shadow: 'hover' }"
@refresh="getTableData"
@search="handleSearch"
@reset="handleSearch"
/>
当然组件库内部仍有不少无法自定义的功能，后续会慢慢优化。
后续规划？
- 开源基于ideaz-element的低代码工具（开发进度60%）
- 新组件方面，计划添加菜单等组件
- 新功能方面，主要是为表格和表单添加新功能，例如：吸顶、状态列等
欢迎大家提issue，大家如果能够点个star就更好了。
功能介绍
ZCrud组件支持的功能非常多，是基于ZTable组件（基于ElTable封装）和ZFilterForm（基于ElForm和ZForm组件封装）组件封装的。因此，ElTable组件支持的属性直接在ZCrud组件上传递即可，所有属性均支持。当然，还有很多不足的地方，后续会慢慢优化。
在业务中不管是最简单的表格还是增删改查功能，更推荐大家使用ZCrud组件而不是ZTable组件，因为ZCrud组件基本包含了表格组件所有功能，更能支撑业务后续改动。
下面简单介绍一些特色功能（示例均为Mock接口，类似于列显隐，列自定义等基础功能就不介绍了）：
表格功能
条件缓存
ZCrud组件支持筛选条件和分页数据缓存（sessionStorage），浏览器刷新或跳转路由仍保持原筛选条件和分页数据。
数据项拖动
ZCrud组件支持数据项拖动（ZTable组件功能），拖拽项icon支持自定义
可编辑表格
可编辑表格详细文档地址：Table 表格 | (naivesteven.github.io)
ZCrud组件支持可编辑（ZTable组件功能），操作功能支持点击后续逻辑自定义或操作项自定义。
支持多行编辑模式，支持设置最大新增数量，支持删除二次确认。
工具栏
支持用户快捷刷新当前表格、配置表格密度、全屏和拖拽配置列。
前端分页
支持传入所有数据，然后前端分页（暂不支持前端筛选，后续会添加该功能）。
表格单选
支持传入type为radio，能有使用el-radio实现表格单选。
表格头
column中将label配置为带slot或Slot的字符串或配置为render函数实现自定义列表头。
column中配置tooltip实现表头提示功能，支持函数和字符串。
组件库中有个约定，类似于label、title等字段，允许传入带 slot 的字符串，表示这边使用插槽。
const columns = ref([
{
prop: 'name',
label: () => h('span', '自定义表头'),
},
{
prop: 'gender',
label: 'genderHeaderSlot', // 这边表示使用 genderHeaderSlot 插槽
},
{
prop: 'age',
label: '年龄',
tooltip: () => h('span', '年龄提示'),
},
{
prop: 'time',
label: '出生日期',
tooltip: '出生日期提示',
},
])
操作按钮
ZCrud组件会默认配置操作列（新增、删除和编辑），支持根据权限显隐操作项，也支持自定义操作列
详细文档地址：Crud 增删改查 | (naivesteven.github.io)
支持快捷配置操作项（reference支持自定义）：
const columns = ref([
{
label: '姓名',
prop: 'name',
},
{
prop: 'gender',
label: '性别',
},
{
prop: 'age',
label: '年龄',
},
{
prop: 'time',
label: '出生日期',
},
{
type: 'button',
label: '操作',
width: '200px',
buttons: [
{
type: 'primary',
link: true,
label: '编辑',
onClick: ({ row }: TableColumnScopeData<RowData>) => {
console.log(row, 'edit')
},
},
{
type: 'danger',
link: true,
label: '删除',
onClick: ({ row }: TableColumnScopeData<RowData>) => {
console.log(row, 'delete')
},
},
{
type: 'dropdown',
reference: '其他',
children: [
{
type: 'primary',
link: true,
label: '复制',
onClick: ({ row }: TableColumnScopeData<RowData>) => {
console.log(row, 'copy')
},
},
{
type: 'danger',
link: true,
label: '操作',
onClick: ({ row }: TableColumnScopeData<RowData>) => {
console.log(row, 'operate')
},
},
],
},
],
},
])
数据获取
内置接口处理
您可以直接将查询接口传入ZCrud组件内部，组件内部会处理查询、重置和翻页等操作。接口返回数据支持路径自定义、数据再次操作、数据处理、自定义返回等功能。
接口处理详细文档：Crud 增删改查 | (naivesteven.github.io)
<script lang="ts" setup>
const loading = ref(false)
const formData = ref({
name: '',
gender: '',
time: [],
})
const tableData = ref([])
const columns = ref([
{
prop: 'name',
label: '姓名',
search: {
component: 'input',
field: 'name',
label: '姓名', // label 和 field 不传，会默认取上一级的 label 和 prop
},
},
{
prop: 'gender',
label: '性别',
search: {
component: 'select',
field: 'gender',
formItemProps: { // 为了快捷使用，label、tooltip、colon、extra等属性也可以直接写在 component 那一级（推荐），当然也可以使用 formItemProps
required: true,
label: '性别',
},
},
},
{
prop: 'age',
label: '年龄',
search: {
component: 'el-date-picker',
field: 'time',
label: '出生日期',
rules: { // 为了快捷使用，required、message等属性也可以直接写在 component 那一级（推荐），当然也可以使用 rules
required: true,
message: '出生日期必选',
},
fieldProps: {
type: 'daterange',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
},
},
},
{
prop: 'time',
label: '出生日期',
},
])
const options = {
gender: [{ label: 'male', value: 'male' }, { label: 'female', value: 'female' }],
}
const pagination = ref({
page: 1,
pageSize: 2,
total: 4,
})
// 传入获取表格数据接口
const request = ref({
searchApi: mockApi,
})
function mockApi() {
return new Promise((resolve) => {
setTimeout(() => {
// 模拟数据
const data = []
resolve({
data: {
page: 1,
pageSize: 10,
total: 4,
list: data.slice((pagination.value.page - 1) * pagination.value.pageSize, pagination.value.page * pagination.value.pageSize),
},
})
}, 100)
})
}
</script>
<template>
<z-crud
v-model:pagination="pagination"
v-model:data="tableData"
v-model:formData="formData"
v-model:loading="loading"
:options="options"
:columns="columns"
:action="false"
:request="request"
/>
</template>
手动获取数据
需要自己调用获取数据方法，ZCrud组件查询、重置和翻页事件需要手动处理。适合只想要筛选表单和表格功能的用户。
<script lang="js" setup>
const loading = ref(false)
const formData = ref({
name: '',
gender: '',
age: '',
})
const tableData = ref([])
const columns = ref([
{
prop: 'name',
label: '姓名',
search: {
component: 'input',
label: '姓名',
field: 'name',
},
},
{
prop: 'gender',
label: '性别',
search: {
component: 'select',
label: '性别',
field: 'gender',
},
},
{
prop: 'age',
label: '年龄',
search: {
component: 'input',
label: '年龄',
field: 'age',
},
},
{
prop: 'time',
label: '出生日期',
},
])
const options = {
gender: [{ label: 'male', value: 'male' }, { label: 'female', value: 'female' }],
}
const pagination = ref({
page: 1,
pageSize: 2,
total: 4,
})
function mockApi(params) {
return new Promise((resolve) => {
setTimeout(() => {
// 模拟数据
const data = []
resolve({
result: {
page: 1,
pageSize: 10,
total: 4,
list: data.slice((pagination.value.page - 1) * pagination.value.pageSize, pagination.value.page * pagination.value.pageSize),
},
})
}, 100)
})
}
async function getTableData() {
loading.value = true
try {
const params = {
...pagination.value,
...formData.value,
}
const res = await mockApi(params)
tableData.value = res.result.list
pagination.value.total = res.result.total
}
catch (error) {
console.log(error)
}
loading.value = false
}
function handleSearch() {
pagination.value.page = 1
getTableData()
}
getTableData()
</script>
<template>
<z-crud
v-model:pagination="pagination"
v-model:data="tableData"
v-model:formData="formData"
:columns="columns"
:options="options"
:loading="loading"
:action="false"
// 如果您想要手动获取表格数据，您需要处理这三个事件
@refresh="getTableData"
@search="handleSearch"
@reset="handleSearch"
/>
</template>
表单功能
筛选表单功能是基于ZFilterForm组件（基于ZForm组件）封装的，表单响应式是被默认配置为{ xl: 6, lg: 8, md: 8, sm: 12, xs: 24 }。组件库的表单组件placeholder、clearable、filterable等属性也会被默认配置。
ZForm组件功能基本都支持，例如：tooltip、colon、联动、校验、自定义等，同时查询和重置按钮支持事件和按钮自定义。
筛选表单功能就简单过下，后面会再专门出一片文章介绍ZForm组件，想详细了解的可以查看以下传送门。
详细文档地址：Form 表单 | (naivesteven.github.io)FilterForm 筛选表单 | (naivesteven.github.io)
新增编辑
组件内置新增编辑功能。在column项中配置add或edit就可以实现新增表单和编辑表单的配置。当然也可以配置form字段（相当于统一add和edit）。
新增编辑功能详细文档地址：Crud 增删改查 | (naivesteven.github.io)
const columns = ref([
{
prop: 'name',
label: '姓名',
add: {
component: 'input',
field: 'name',
label: '姓名',
required: true,
},
edit: {
component: 'input',
field: 'name',
label: '姓名',
required: true,
},
},
{
prop: 'gender',
label: '性别',
add: {
component: 'select',
field: 'gender',
label: '性别',
},
edit: {
component: 'select',
field: 'gender',
label: '性别',
},
},
{
prop: 'age',
label: '年龄',
add: {
component: 'el-date-picker',
field: 'time',
label: '出生日期',
fieldProps: {
type: 'daterange',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
},
},
edit: {
component: 'el-date-picker',
field: 'time',
label: '出生日期',
fieldProps: {
type: 'daterange',
startPlaceholder: '开始日期',
endPlaceholder: '结束日期',
},
},
},
{
prop: 'date',
label: '出生日期',
},
])
编辑弹窗支持打开时通过行数据或detailApi配置数据，也支持对详情数据二次处理。新增和编辑弹窗支持自定义确定和取消。
如果您想配置新增和编辑表单属性，可以给ZCrud组件传递add和edit对象属性，同理form字段统一配置新增和编辑表单。
如果您想配置新增和编辑弹窗属性，可以配置add.dialog和edit.dialog，同理dialog字段（直接传递给ZCrud组件）统一配置新增和编辑弹窗。
删除
组件内置删除功能，支持批量删除。
删除功能详细文档地址：Crud 增删改查 | (naivesteven.github.io)
配置request的deleteApi字段，可以调用接口删除。参数默认为id，也可以通过rowKey配置。
- 支持通过传入
alert对象属性配置ElAlert删除提示，也支持通过render函数或插槽自定义多选删除提示 - 支持通过
opearte-delete事件或delete传入方法，删除按钮后续逻辑自定义
查看
组件内置查看功能。
配置column的detail字段、配置detail的columns数据、配置form的columns字段、配置column项的form字段（但会同时配置查询、新增和编辑表单，可以设置search、add和edit为false关闭）都可以实现详情抽屉的详情项配置。并不是想绕晕大家，组件只是为了很多不同的使用场景配置了更多方便的入口，建议您查看文档
查看功能详细文档：Crud 增删改查 | (naivesteven.github.io)
查看详情默认会用行数据展示，如果需要调用接口，可以配置request的detailApi（返回数据支持自定义数据路径）。
- 支持通过
drawer对象属性配置查看抽屉属性 - 支持通过
operate-view事件或detail传入方法，查看按钮后续逻辑自定义
最后
感谢您阅读到最后，文章介绍并不全面，您可以自行到组件库文档中去探索更多功能，欢迎您体验组件库，有任何问题，您都可以提issue或进群交流。大佬轻喷。
最后，开源不易，欢迎大家star😆，以及进群交流。
Github：
转载自:https://juejin.cn/post/7388278660149084210