广州网站建设报价表,大学生创业网站建设方案,jplayer wordpress,wordpress门户主体搜索框组件
封装常用搜索框组件#xff0c;类型有#xff1a; input#xff08;默认值)selectselectV2 (value/label键值对数组)datePickeryear 集成新增、修改、删除、导入、导出按钮#xff0c;支持slot自定义其他按钮封装搜索、重置按钮封装按钮权限封装导入弹框 本例仅…搜索框组件
封装常用搜索框组件类型有 input默认值)selectselectV2 (value/label键值对数组)datePickeryear 集成新增、修改、删除、导入、导出按钮支持slot自定义其他按钮封装搜索、重置按钮封装按钮权限封装导入弹框 本例仅列出常用的封装其他类型的可自行加入 参数
名称类型必传说明queryParamsObjecttrue搜索框的变量值searchOptionsArraytrue搜索框显示的值及参数类型具体见下表showSearchBooleanfalse是否显示右侧搜索功能组btnListArrayfalse按钮组默认值[‘add’, ‘edit’, ‘remove’, ‘import’, ‘export’]singleBooleanfalse单选multipleBooleanfalse多选authPreFixStringfalse权限前缀exportUrlStringfalse导出url可优化省略掉titleStringfalse导出名称
searchOptions属性
名称默认值可选说明label表单名称prop参数名称typeinputselect、selectV2、datePicker、year类型width200宽度options选项valueFormat日起值格式disabled是否禁用
用法 search-toolrefsearchRef:search-optionssearchOptions:query-paramsqueryParamsqueryhandleQueryresethandleReset/const searchOptions3 reactive([{ prop: code, label: 自动配置编码, },{ prop: userName, label: 用户名称, },{ prop: year, label: 注册年份, type: year, },{ prop: type, label: 类型, type: select, options: [], },{ prop: auditFlag, label: 审核标识, type: select, options: [], },
])这样一个搜索栏就做好了有以下好处
格式样式统一代码简洁便于维护
源码
template
!-- 搜索区域--el-form :modelprops.queryParams refqueryRef :inlinetrue v-showshowSearch2el-form-item v-for(item, index) in props.searchOptions :keyindex :labelitem.label :propitem.propel-inputv-ifitem.type input || !item.typev-modelprops.queryParams[item.prop]:placeholder请输入 item.labelclearable:stylewidth:${item.width || defaultWidth}pxkeyup.enterhandleQuery/el-selectv-ifitem.type selectv-modelprops.queryParams[item.prop]:placeholder请选择 item.labelclearablefilterable:stylewidth:${item.width || defaultWidth}pxel-optionv-fordict in item.options:keydict.value:labeldict.label:valuedict.value//el-selectel-select-v2v-ifitem.type selectV2v-modelprops.queryParams[item.prop]:optionsitem.optionsclearablefilterable:stylewidth:${item.width || defaultWidth}px:placeholder请选择 item.label/el-date-pickerv-ifitem.type datePickerv-modelprops.queryParams[item.prop]:value-formatitem.valueFormat || defaultTimeFormat:formatitem.format || defaultTimeFormattypedaterangerange-separator-start-placeholder开始日期end-placeholder结束日期:stylewidth:${item.width || 180}px/el-date-pickerel-date-pickerv-ifitem.type yearv-modelprops.queryParams[item.prop]typeyearvalue-formatYYYY:placeholder请选择 item.label:stylewidth:${item.width || 120}px:disableditem.disabled//el-form-itemel-form-itemel-button typeprimary iconSearch clickhandleQuery搜索/el-buttonel-button iconRefresh clickresetQuery重置/el-button/el-form-item/el-form
/templatescript setup
import { getCurrentInstance, ref } from vue;const props defineProps({queryParams: { type: Object, required: true, },searchOptions: {type: Array,required: true,default: () {return []},},showSearch: { type: Boolean, default: true },// 显隐列columns: { type: Array, default: () [] }
})
const emits defineEmits([query, reset])
const { proxy } getCurrentInstance();
const showSearch2 ref(props.showSearch)// 默认宽度
const defaultWidth ref(200)
// 默认时间格式
const defaultTimeFormat YYYY-MM-DD// 搜索
const handleQuery () { emits(query) }// 重置
const resetQuery () {proxy.resetForm(queryRef);emits(reset)
}
/script
