网站着陆页有多少个,wordpress中文 速度慢,h5开源网站模板,服务器免费el-select下拉获取数据 1.解决问题2.封装MyScrollSelect组件3.使用MyScrollSelect组件 1.解决问题 场景#xff1a;下拉数据量过大#xff0c;后端提供一个分页查询接口#xff1b;需要每次滚动加载下一页的下拉数据 且单选的状态#xff0c;需要支持回显#xff0c;通过n… el-select下拉获取数据 1.解决问题2.封装MyScrollSelect组件3.使用MyScrollSelect组件 1.解决问题 场景下拉数据量过大后端提供一个分页查询接口需要每次滚动加载下一页的下拉数据 且单选的状态需要支持回显通过name名称查询回显–本文已包含 如果是多选回显可以让后端提供一个根据idList能反向找到对应id的下拉集合的接口–可自己试试 2.封装MyScrollSelect组件
templatedivlist长度{{ list.length }}/divdiv$attrs{{ $attrs }}/divel-select changechangeVal v-bind$attrs :remote-methodremoteMethod stylewidth: 100%div v-infinite-scrollloadMore styleoverflow: hiddenel-option v-foritem in list :keyitem[valueKey] :labelitem[labelKey] :valueitem[valueKey] /!-- 下拉底部加载提示 --div v-ifloading classloading-text加载中.../div/div/el-select
/templatescript setup
import { ref, watch, onMounted } from vue
import { debounce } from lodashconst emit defineEmits([update:searchName]);const props defineProps({// v-model绑定值不为空时传递初始数据列表initialOptions: {type: Array,default: () []},// 传入对应的列表加载apimethods: {type: Function,required: true // 或者 true取决于它是否必须被传递},// 传入查询关键字searchKey: {type: String,default: },// 所选key对用namesearchName: {type: String,default: undefined},labelKey: {type: String,default: name},valueKey: {type: String,default: id},// 查询的其他参数queryData: {type: Object,default: () { }},
})const isMounted ref(false)
const loading ref(false)const list ref([]) // 选项列表
const queryFrom ref({pageNum: 1,totalPage: 1,pageSize: 20
})// 自定义远程搜索方法
const remoteMethod (query) {queryFrom.value.pageNum 1list.value []queryFrom.value[props.searchKey] queryqueryFrom.value { ...queryFrom.value, ...props.queryData }getList()
}// 调用props.methods获取下拉数据
const getList () {loading.value trueprops.methods(queryFrom.value).then(res {console.log(%c【 res 】打印, color:#fff;background:#0f0, res)list.value [...list.value, ...res.records]queryFrom.value.totalPage Math.ceil(res.total / 20) // 计算总页数 不是总数}).finally(() {loading.value false})
}// 无限滚动触底加载
const loadMore debounce(() {if (queryFrom.value.pageNum queryFrom.value.totalPage || loading.value) returnqueryFrom.value.pageNumgetList()
}, 200)// 根据id回显name
const changeVal (e) {list.value.forEach(ele {if (ele[props.valueKey] e) {emit(update:searchName, ele[props.labelKey])}})
}// 监听 initialOptions 的变化用于加载初始值
watch(() props.initialOptions,newVal {// 如果 modelValue 中的值还未加载到选项中加载这些数据if (newVal newVal.length 0) {list.value.push(...props.initialOptions)}},{ immediate: true }
)onMounted(() {isMounted.value true// 获取初始数据if (props.searchName) {remoteMethod(props.searchName) // 根据name回显} else {getList()}
})
/script
style scoped
.loading-text {padding: 5px;text-align: center;color: #999;font-size: 12px;
}
/style3.使用MyScrollSelect组件
templatediv classpage-view wbg pallpre{{ form }}/prediv stylemargin-top: 50px多选只能存id/divMyScrollSelectv-ifisMountedrefreviewStageRefv-modelform.idList1:placeholder滚动加载或搜索-单选clearablefilterableremotecollapse-tagscollapse-tags-tooltipmultiple:initialOptionsinitialOptions:methodsgetDeviceNameListApisearchKeyterminalDeviceNamevalueKeyidlabelKeyterminalDeviceName/div stylemargin-top: 50px单选可存id和name 根据name可回显/divMyScrollSelectv-ifisMountedrefreviewStageRefv-modelform.terminalDeviceIdv-model:searchNameform.terminalDeviceName:placeholder滚动加载或搜索-单选clearablefilterableremote:initialOptionsinitialOptions:methodsgetDeviceNameListApisearchKeyterminalDeviceNamevalueKeyidlabelKeyterminalDeviceName//div
/templatescript setup
import { onMounted, ref } from vue
import { getDeviceNameListApi } from /api/ipManagement.js // 后端获取下拉分页接口defineOptions({name: FactorySiteAddressLedger
})const isMounted ref(false)
const form ref({idList1: [], // 多选参数terminalDeviceId: 710241160000004443, // 单选参数terminalDeviceName: 益海电厂网监工作站,
})const reviewStageRef ref(null)const initialOptions ref([]) // 初始下拉数据onMounted(() {isMounted.value true
})
/script
style langscss scoped/style
