element ui 自定义组件,
这篇文章主要为大家详细介绍了某视频剪辑软件元素自定义查询组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文主要介绍某视频剪辑软件项目，在引入元素的前提下，对组件进行二次封装实现通过配置项直接布局。
一、查询条件组件化
结合EventBus.js的使用，传递事件更高效，可以避免各种复杂的生命周期依赖关系。
在components/dataForm文件夹下dataForm.vue作为组件集合的载体，并创建配置项
1.1 dataForm代码实例
//dataForm.vue
模板
el-row
选项中的输入形式v-for=(item，index ):key= 数据表单_ index
！-输入框-
输入形式
:key=index
v-if=item.type==input
:data=item
/输入-表单
/el-row
/模板
脚本
从" @/assets/js/eventBus.js "导入事件总线
导入输入表单@/组件/数据表单/输入表单
导出默认值{
组件：{
输入格式，
},
道具：{
/**
* 表单配置项
* @param {Object}选项配置参数，具体如下：
*类型：表单项类型，字符串，可选值投入
*/
选项：{
类型：数组，
默认(){
return[]；
},
},
},
data() {
返回{}
},
已创建(){
//此处主要是为了实现下拉框对其他子组件的显示和隐藏
事件总线.$on(refreshDataForm ，e={
这个。刷新数据表单(e)；
});
},
//页面销毁事件销毁
销毁前(){
事件总线.$off(refreshDataForm )
事件总线.$off(手柄点击)
},
方法：{
//更新表单数据
refreshDataForm(项目){
让数据=this .选项
data.forEach((e，i)={
如果(项。类型==e .类型项目。name==e . name){
this.options[i]=item
}
})
},
//子组件点击事件响应父组件，数据传递
手柄点击(数据){
事件总线.$emit(handleClick ，数据)
},
//表单数据格式化（可以对是否必填项目做必填校验)
getDataForm() {
让数据=this .选项
设formObj={}
让错误=
尝试{
data.forEach(e={
if (e.type===input) {
如果(e .要求！电子内容){
错误=请输入电子标签
投掷误差
}
表格对象[电子名称]=电子内容
} else if(e . type=== select e . type=== dataSelect ){
如果(e .要求！电子内容){
错误=请选择电子标签
投掷误差
}
表格对象[电子名称]=电子内容
} else if(e . type=== date e . type=== data radio ){
如果(e .要求！电子内容){
错误=请选择电子标签
投掷误差
}
begin name=begin regtime
form obj[e . end name]=e . end regtime
} else if (e.type===image) {
表格对象[电子名称]=电子文件电子内容
} else if (e.type===upload) {
表格对象[电子名称]=电子文件电子内容
if (e.delFileName) { //删除附件集合及自定义名称和默认名称
form obj[e . delfilename]=e . delfileids。联接(，)
}否则{
form obj[ delFileName ]=e . delfileids。联接(，)
}
}
})
返回表单对象
} catch(错误){
这个message({ message:error，type: error})
}
}
}
}
1.2 子组inputForm.vue
注：此处被引用的组件也可以被页面单独引用
模板
埃尔-科尔
el-col :span=data.boxSpan？data.boxSpan:boxSpan v-if=！ data.isHide
el-col :span=data.infoSpan？ data.infoSpan:infoSpan
el-col :span=data.infoSpan？infoSpan v-if=data.labelSpan！=0
El-form-item _ label :class= { require :data。需要} v-html=数据。标签/标签
/el-col
el-col :span=data.contentSpan？v-if=data.contentSpan！=0
El-input:class= { base _ textarea :data。 v-model。trim=数据。 content :type= data。文本区？textarea“:”:disable= data。 readonly :placeholder= setPlaceholder maxlength= 200 /El-input
/el-col
/el-col
span v-text=title/span
/div
/el-col
/模板
脚本
导出默认值{
道具：{
//类型投入输入框
类型：{
类型：字符串，
默认："输入"
},
//默认栅栏布局8/24
boxSpan: {
类型：数量，
默认值：8
},
//默认栅栏布局24/24
infoSpan: {
类型：数量，
默认值：24
},
//默认栅栏布局8/24
spanSpan: {
类型：数量，
默认值：8
},
//默认栅栏布局16/24
contentSpan: {
类型：数量，
默认值：16
},
/**
*姓名关键字
*类型表单类型
*标签表单标题
*内容表单内容
*只读是否只读默认否
* isHide是否隐藏默认否
*文本区域是否文本类型默认否
**/
数据：{
类型：对象，
默认(){
return []
}
}
},
计算值：{
setPlaceholder() {
if(this.data.readOnly！this.data.content) {
返回""
}
返回请输入
}
}
}
/脚本
样式范围
//必填样式。需要：在{
内容："*";
颜色：红色；
}
//flex布局标题垂直居中。埃尔-表单-项目_ _标签{
浮动：对；
保证金下限：0;
行高：20px
显示器：flex
对齐-项目：居中；
最小高度：40px
}
/风格
1.3 父页面引用及使用
模板
el-row
数据表单：options=搜索数组 ref=搜索数组/input-form
/el-row
/模板
脚本
从" @/assets/js/eventBus.js "导入事件总线
导入数据形式 @/组件/数据形式/数据形式
导出默认值{
组件：{
数据形式
},
data() {
返回{
//查询菜单配置
searchArray: [
{
姓名：人员姓名，
类型："输入",
标签: 用户名，
内容：""
},
{
姓名："人名2",
类型："输入",
标签: 用户名2,
内容：""
}
]
}
},
已创建(){
//监听子组件传参
事件总线.$on(refreshDataForm ，e={
this.refreshDataForm(e)
})
},
销毁(){
//销毁子组件传参监听
事件总线.$off(refreshDataForm )
},
方法：{
//监听子组件操作
refreshDataForm(e) {
//逻辑代码
这个. forceUpdate()
},
//数据查询
handleQuery() {
//获取组件参数返回数据格式
让searchArray=this .$refs.searchArray.getDataForm()
//如果存在必填项，返回值为空，此时有弹窗提示
如果(!searchArray) {
返回
}
//查询接口逻辑
}
}
}
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。