vue封装列表组件,vue element组件
这篇文章主要介绍了Vue3 ElementPlus表单组件的封装实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
表格文件夹FormItem.tsx在页面中引用总结在系统中，表单作为用户与后端交互的重要传递组件使用频率极高，故对其进行封装是必然的，也是一个编写规范代码的前端程序员必须做的一件事。
在Vue3中封装组件时，能感受到与Vue2有着很大的不同，故作此记录。
form文件夹
FormItem.tsx文件是以打字打的文件中的新特性之一，详细可查阅分时（同分时)中文文档索引。某视频剪辑软件是主体文件type.ts表单的规约
FormItem.tsx
从"@/实用工具/过滤器"导入过滤器
导入{
ElCheckbox，
ElCheckboxGroup，
ElDatePicker，
艾林普特，
ElInputNumber，
私奔，
ElRadio，
ElRadioGroup，
ElSelect，
ElTimePicker
}来自"元素加"
从“vue”导入{定义组件}
//普通显示
const Span=(form: Recordstring，any，data: Recordstring，any)=(
span{data.valueProp？形式[数据。价值主张]:(数据。过滤器？filter(form[data.prop]，data.filter) : form[data.prop] 无)}/span
)
//输入框
const Input=(form: Recordstring，any，data: Recordstring，any)=(
埃利努特
v-model={form[data.prop]}
type={data.type}
大小=小
show-password={ data。type== password }
可清除的
占位符={ 请输入data.label}
autosize={{
minRows: 3，
maxRows: 4，
}}
{.data.props}
/ElInput
)
//数字输入框
const input number=(form:record string，any，data: Recordstring，any)=(
ElInputNumber
大小=小
v-model={form[data.prop]}
控件-位置=右
{.data.props}
/
)
const setLabelValue=(_item: any，{ optionsKey }: any={})={
返回{
标签:optionsKey？_ item[选项键。标签]:_ item。标签，
值：optionsKey？_ item[选项键。值]:_ item。价值
}
}
//选择框
const Select=(form: Recordstring，any，data: Recordstring，any)=(
ElSelect
大小=小
v-model={form[data.prop]}
可滤过的
可清除的
占位符={ 请选择data.label}
{.data.props}
{data.options.map((item: any)={
返回私奔{.setLabelValue(item，data)} /
})}
/ElSelect
)
//单选/区间日期
const Date=(form: Recordstring，any，data: Recordstring，any)=(
ElDatePicker
大小=小
v-model={form[data.prop]}
type={data.type}
值格式={data.valueFormat}
format={data.format}
范围分隔符=至
start-placeholder={ data。开始占位符}
end-placeholder={ data。结束占位符}
占位符={ 请选择data.label}
{.data.props}
/
)
//单选/区间时间
const Time=(form: Recordstring，any，data: Recordstring，any)=(
ElTimePicker
大小=小
v-model={[form[data.prop]]}
值格式={data.valueFormat}
format={data.format}
范围分隔符=至
disabled={form.editable}
start-placeholder={data.start}
is-range={data.isRange}
end-placeholder={data.end}
{.data.props}
/
)
//单选
const Radio=(form: Recordstring，any，data: Recordstring，any)=(
El radio group v-model={ form[data。道具]}
{data.radios.map(
(item:{ label:string number boolean；value: any })={
返回（
El radio label={ setLabelValue(item，data.prop).标签}
{setLabelValue(item，data.prop).价值}
/ElRadio
)
},
)}
/ElRadioGroup
)
//多选
const Checkbox=(form:Recordstring，any，data: Recordstring，any)=(
El复选框组大小= small v-model={ form[data。道具]}
{data.checkboxs.map(
(item:{ label:string number boolean；value: any })={
返回（
El checkbox label={ setLabelValue(item，data.prop).标签}
{setLabelValue(item，data.prop).价值}
/ElCheckbox
)
},
)}
/ElCheckboxGroup
)
const setFormItem=(
形式：记录字符串，any undefined，
数据：记录字符串，任意，
可编辑：布尔型，
)={
如果(!表单)返回空
如果(!可编辑)返回范围（表单，数据)
开关（数据类型){
案例"输入":
返回输入（表单、数据)
大小写“文本区”:
返回输入（表单、数据)
大小写"密码":
返回输入（表单、数据)
大小写"输入号码":
返回输入号码(表单，数据)
案例"选择":
返回选择（表单，数据)
案例"日期":
案例"日期范围":
返回日期（表格，数据)
案例"时间":
返回时间（表格，数据)
案例"收音机":
返回无线电（表格，数据)
案例"复选框":
返回复选框（表单，数据)
默认值：
返回空
}
}
导出默认值()=
定义组件({
道具：{
数据：对象，
表单数据：对象，
可编辑：布尔型，
},
设置（道具){
return ()=
道具。数据
？setFormItem(props.formData，props.data，props.editable)
：空
},
})
索引。某视频剪辑软件
模板
el-form ref=FormRef
:model=prop.data.data
:rules=editable？prop.data.rules : {}
:inline=inline
:label-position=labelPosition
标签宽度=阿图
El-row:gutter= prop。数据。埃尔罗排水沟
支持。数据。表单项目中的项目
:span=item.span
el-form-item :label=item.label？item.label :
:prop=item.prop
:label-width=item.width
FormItem:formData= prop。数据。数据
:editable=editable
:data=item
/FormItem
/El-表单-项目
/el-col
BTN名单BTN名单。长度
:span=24
埃尔-表单-项目
模板v-for= btnList中的项目
Btn :props=item
@click=onClick(item)/Btn
/模板
/El-表单-项目
/el-col
/el-row
/el格式
/模板
脚本语言设置
从@ vue/反应性导入{ computed }
从“元素加”导入类型{ FormInstance }
从“vue”导入{ ref }
从导入项目 FormItem
从""导入类型{常见形式} ./type
界面道具{
数据：常见形式
}
const prop=definePropsProps()
const editable=computed(()=！prop.data？可编辑)
const inline=computed(()=！prop.data.formProps？内嵌)
常量标签宽度=计算值(()=属性。数据。形式道具？labelWidth 100px像素像素)
const labelPosition=computed(
()=prop.data.formProps？labelPosition top ，
)
const btnList=computed(()={
返回prop.data.formProps？按钮
})
//tsx组件
const FormItem=formItem()
const FormRef=refFormInstance()
//表单按钮
函数onClick(数据：{ onClick？()=void }) {
如果(!data.onClick)返回
data.onClick()
}
//表单校验
异步函数验证(){
如果(!FormRef.value)返回
const result=await form ref。价值。验证()
回送结果
}
//清除表单验证
异步函数resetFields() {
返回等待表单参考。价值。重置字段()
}
defineExpose({
验证，
重置字段，
})
/脚本
样式范围。埃尔-表单-项目{
边距：0 10px！重要；
}。埃尔-表单-项目_ _标签{
位置：绝对；
}。埃尔-表单-项目_ _内容{
宽度：100%;
左填充：80px
}。el-select。埃尔-输入_内部{
宽度：100%;
}
/风格
type.ts
类型项目类型=
输入
选择
开关
收音机
日期
时间
复选框
日期范围
界面表单属性{
内嵌？布尔型
labelWidth？字符串数字
labelPosition？左 上 右
btn？对象[]
}
项目界面{
类型：项目类型
标签？字符串
道具：绳子
valueProp？字符串
宽度？字符串数字
跨度？数字
过滤器？字符串
}
导出类公共格式{
公共数据：任何
私人规则？对象
公共埃尔罗古特？数字
公共可编辑？布尔型
公共formProps？FormProps
公共格式项：格式项[]
公共数据阵列？对象[]
构造函数({
data={}，
rules={}，
editable=true，
formProps={}，
formItems=[]，
elRowGutter=0，
}: any) {
this.data=数据
这个规则=规则
this.elRowGutter=elRowGutter
this.editable=可编辑
this.formItems=formItems
this.formProps=formProps
}
}
在页面中引用
changCarrier.vue是主题页面，用来显示表单userForm.ts是对表单进行渲染的数据项索引。某视频剪辑软件
模板
el-dialog v-model=show
v-if=show
:title=`${title}人员`
:before-close=handleClose
宽度=60%
Form ref=FormRef
:data=formData/Form
模板#页脚
el-button @click=handleClose 关闭/el-button
埃尔按钮类型="主要"
v-show=！详细信息
@click=提交提交/el-button
/模板
/el-dialog
/模板
脚本语言设置
从“vue”导入{反应、参考、定义极限}
//从" @/api "导入美国石油学会(American Petroleum Institute)
从“元素加”导入{ ElMessage }
从导入使用表单/hooks/useForm//表单的
从" @/api/index "导入美国石油学会(American Petroleum Institute)
枚举类型{
默认=,
添加"="新增，
unData=编辑，
详细信息=详情，
}
const show=ref(false)//控制表单开关
const title=ref(类型。默认)//表单标题
const FormRef=ref()//表单数字正射影像图
const emit=define发出([ refresh ])//父组件传过来的方法，作用：在表单提交后触发，刷新数据
defineExpose({//向父组件暴露其属性及方法，实例：父组件点击添加，触发formRef中的加载行为
秀，
标题，
setData，
添加数据，
戴尔数据，
})
//表单生成
设formData=useForm()
//新增
函数addData() {
handleOpen(添加)
}
//编辑设置数据
函数setData(data: object) {//父组件点击编辑，将值通过方法传过来
formData.data=reactive({.数据})
handleOpen(unData )
}
//删除
异步函数戴尔数据(数据：数字){
const RES:any=await API。加油站。deletequeueapply({
id列表：[数据],
})
发出("刷新")
}
//请求
异步函数请求(){
let res: any
//表单数据是否存在编号值，存在编号值表示编辑，不存在则为添加
如果(!formData.data？id) {
//编辑提交
RES=等待API。加油站。addqueueapply(formdata。数据)
} else if (formData.data？id) {
//新增提交
RES=等待API。加油站。updatestartwarehouse(formdata。数据)
}
if (res？status.state===00) {
ElMessage.success(操作成功)
标题。值=类型。系统默认值
发出(刷新)//刷新数据
show.value=false
} else if (res？状态。状态！==00) {
ElMessage.error(res？状态)
}
show.value=false
}
//清除验证信息
异步函数重置(){
await FormRef.value.resetFields()
}
//新增表单打开事件
函数把手打开(类型：任何){
formData.formItems=useForm().formItems //表单项目
formData.editable=true //打开表单编辑
title.value=types[type]
show.value=true //表单的打开
}
//表单关闭事件
函数handleClose() {
show.value=false
reset()//重置该表单项，将其值重置为初始值，并移除校验结果
}
//提交
异步函数提交(){
const result=await form ref。价值。验证()
如果(结果)请求()
}
/脚本
使用形式
从" @/组件/通用/表单/类型"导入{ commonForm }
从“vue”导入{反应性}
导出默认值()={
常量规则={
名称：[
{必需：真，消息： 人员名称，触发器：模糊 }
]
}
常数形式=反应性（
新的通用格式({
数据：[],
可编辑：真，
规则：规则，
表格项目：[
{
标签: 人员名称，
类型：选择，
道具："名称",
},
{
标签: 日期范围，
类型："日期范围",
属性：队列日期，
格式：“YYYY-MM-DD”，
值格式： YYYY-MM-DD ，
StartPlaceholder:开始时间，
EndPlaceholder:“结束时间”，
跨度：6，
},
{
标签:“时间段范围”，
类型：“时间”，
属性：“时隙”，
格式：“小时：分钟”，
值格式：“时：分”，
开始：“开始时间”，
结束：“结束时间”，
isRange:没错，
跨度：6，
},
{
标签:“允许的队列数”，
类型：“输入”，
属性：队列编号，
跨度：6，
},
{
标签:“有效类型”，
类型：选择，
道具：“isDelay”，
选项：[
{
标签:“当天生效”，
值：0，
},
{
标签:“第二天生效”，
值：1，
}
],
跨度：6，
},
{
标签:“有效时间”，
类型：“日期”，
属性：“有效时间”，
格式：“YYYY-MM-DD”，
值格式： YYYY-MM-DD ，
跨度：6，
},
],
}),
)
退货单
}
总结
一百个人有写代码的习惯，它的实现是基于模块化的思想。可能看起来有点累，但相信能帮到你。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。