手机当服务器建网站,中国建站平台,有经验的江苏网站建设,呼伦贝尔建设网站最近使用Vue3ElementPlus开发项目#xff0c;从整体上构思组件的封装。能写成组件的内容都进行封装#xff0c;方便多个地方使用。 受AntDesign的启发#xff0c;在项目中有搜索表单table分页的地方可以封装为一个组件#xff0c;只需要对组件传入table的列#xff0c;组成…最近使用Vue3ElementPlus开发项目从整体上构思组件的封装。能写成组件的内容都进行封装方便多个地方使用。 受AntDesign的启发在项目中有搜索表单table分页的地方可以封装为一个组件只需要对组件传入table的列组成一个配置项通过配置可以显示搜索表单、table项的内容展示等等。 那么在使用ElemenPlus开发时是没有这样的组件可以使用的。又一想项目中好多个地方都有搜索表单Table的形式那不如直接封装个搜索表单这样就省去了一遍一遍的表单的重复编写。封装好的组件只需要传入进入配置内容即可实现搜索的效果。
实现思路
搜索表单无非就是文本框、选择框、时间选择、时间范围选择、数字框通过配置项里传入type即可判断展示哪种类型的form-item。数值绑定v-model与传入项的匹配在配置项中传入prop然后在子组件中创建form响应式对象。数据初始值、选项列表等等都通过配置项传入。搜索表单的搜索与重置按钮提交emit事件即可。
首先创建SearchForm.vue组件
该组件实现了输入框、选择框、单日期、双日期一般搜索表单也就这些如果还有其他的类型读者可以自己添加。
script setupimport { reactive, onMounted } from vueimport DateRangePicker from /components/DateRangePicker/index.vueconst props defineProps({itemList: Array})const emit defineEmits([search, reset])let form reactive({})onMounted(() {props.itemList.map(item {if(item.type dateRange) {form[item.start] form[item.end] }else {form[item.prop] item.initValue ? item.initValue : }})})
/scripttemplateel-form :modelform inline label-width120pxtemplate v-for(item, index) in props.itemList :keyindexel-form-item:labelitem.label:propitem.propel-select v-ifitem.type select v-modelform[item.prop] placeholder请选择 clearableel-option v-fori in item.list :keyi.value :labeli.label :valuei.value//el-selectel-date-picker v-ifitem.type date :typeitem.dateType v-modelform[item.prop] placeholder请选择 clearable/date-range-pickerv-ifitem.type dateRangev-model:startform[item.start]v-model:endform[item.end]/el-input-number v-ifitem.type number v-modelform[item.prop] placeholder请输入 clearable/el-input v-ifitem.type input v-modelform[item.prop] placeholder请输入 clearable//el-form-item/templateel-form-itemel-button clickemit(search, form) typeprimary iconSearch查询/el-buttonel-button clickemit(reset) typeprimary plain iconRefresh重置/el-button/el-form-item/el-form
/template其次DateRangePicker组件
这个组件是用来实现选择范围日期的因为范围日期返回的是一个数组如果不进行封装处理一下的话在项目中每写一个该组件都会要写change事件来处理数据值还挺麻烦。封装之后只需要将对应的model传给该组件即可实现双向绑定。
script setup
import { ref } from vue;
const emit defineEmits([update:start, update:end])
const props defineProps({start: {type: String,required: true},end: {type: String,required: true},type: {default: daterange // daterange、datetimerange、monthrange},format: {default: YYYY-MM-DD},valueFormat: {default: YYYY-MM-DD HH:mm:ss}
})
let dateRange ref([])const dateChange (e) {emit(update:start, e ? e[0] : )emit(update:end, e ? e[1] : )
}
/scripttemplateel-date-picker v-modeldateRange:typeprops.type:formatprops.format:value-formatprops.valueFormatstart-placeholder开始日期end-placeholder结束日期changedateChange/
/template最后一步使用SearchForm组件
经过前两步的封装之后在使用的SearchForm组件时简直是爽的不要不要的。看示例
script setupimport { reactive, ref } from vueimport SearchForm from /components/SearchForm/index.vueimport ProListItem from /views/project/components/ProListItem.vueimport { projectList } from /api/project;const searchFormList [{label: 项目名称, prop: name, type: input},{label: 项目编码, prop: code, type: input},{label: 项目描述, prop: desc, type: select, list: [{label: 未开始, value: 1}, {label: 已开始, value: 2}]},{label: 创建日期, type: dateRange, start: startTime, end: endTime}]const dataSource ref([])const queryForm ref()const pagination reactive({pageNum: 1,pageSize: 10,total: 0})const search (form) {console.log(form);queryForm.value formqueryProject()}const queryProject () {projectList({...queryForm.value,pageNum: pagination.pageNum,pageSize: pagination.pageSize}).then((result) {dataSource.value result.data.listdata.total result.data.total}).catch((err) {});}
/script
templatesearch-form :item-listsearchFormListsearchsearch/pro-list-item :datadataSource/
/template
啥也不说了直接看示例用起来多方便只要项目中有要写搜索表单的地方直接引入SearchForm组件配置一下itemList即可实现完整功能学会了的小伙伴赶紧去用起来吧。
