赞
踩
- <template>
- <el-select class="ba-content" :popper-append-to-body="false"
- :value-key="valueName"
- v-model="selectedOptions"
- v-el-select-loadmore="loadmore"
- @change="change"
- :remote-method="remoteMethodThrottle"
- :loading="loading"
- @visible-change="visibleChange" clearable filterable remote
- :placeholder="!disabled?'请输入关键词':'——'" :disabled="disabled">
- <el-option v-for="item in showList" :key="item[valueName]" :label="item[valueName]" :value="item"></el-option>
- </el-select>
- </template>
-
- <script>
- export default {
- name: 'el-select-loadmore',
- props: {
- value: {
- type: String
- },
- showList: {
- type: Array
- },
- placeholder: {
- type: String
- },
- disabled: {
- type: Boolean,
- default: false
- },
- //相同名称的label和value不需传参给子组件,采用默认值
- valueName: {
- type: String,
- default: 'label'
- },
- labelName: {
- type: String,
- default: 'value'
- }
- },
- data() {
- return {
- //data重新定义变量接受组件v-model(value:名称必须为value)值,不改变props接收的值
- selectedOptions: this.value,
- loading: false
- }
- },
- //监听值的变化
- watch: {
- value(newVal) {
- this.selectedOptions = newVal
- }
- //若选择器的值发生改变,则传参给父组件
- //this.$emit(‘input’,val),在父组件直接用v-model绑定,则可以直接获取到
- // selectedOptions(newVal, oldVal) {
- // this.$emit('input', this.selectedOptions)
- // }
- },
- // 自定义指令(和method同级)
- directives: {
- // 下拉框懒加载(el-select-loadmore是自定义的指令,使用时前面加v-)
- 'el-select-loadmore': {
- // el:使用自定义指令的元素(下拉框),
- bind(el, binding) {
- // 下拉框下拉的框
- const SELECTWRAP_DOM = el.querySelector(
- '.el-select-dropdown .el-select-dropdown__wrap'
- )
- // 增加滚动监听,
- SELECTWRAP_DOM.addEventListener('scroll', function () {
- // scrollHeight:当前所有选项的高度
- // scrollTop:滚动的距离
- // clientHeight:下拉框的高度
- // const condition =
- // this.scrollHeight - this.scrollTop == this.clientHeight ||
- // this.scrollHeight - this.scrollTop == this.clientHeight + 1
- const condition =
- this.scrollHeight - this.scrollTop <= this.clientHeight + 40
- // 当滚动条滚动到最底下的时候执行接口加载下一页
- if (condition) {
- binding.value()
- }
- })
- }
- }
- },
- computed: {
- // 防抖
- remoteMethodThrottle() {
- let time = null
- return (param) => {
- if (time) {
- clearTimeout(time)
- }
- time = setTimeout(() => {
- // 搜索方法
- this.remoteMethod(param)
- clearTimeout(time)
- }, 1000)
- }
- }
- },
- methods: {
- // 下拉框出现、隐藏
- visibleChange(val) {
- this.$emit('visibleChange', val)
- },
- // 自定义指令的方法:下拉框滚动到底懒加载
- loadmore() {
- this.$emit('loadmore')
- },
- // 远程搜索物料类别
- remoteMethod(query) {
- this.$emit('remoteMethod', query)
- },
- // 选择器的值发生改变
- change(item) {
- this.$emit('change', item)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- </style>
- <template>
- <selectLoadmore :disabled="disabled" :value="base.otpTcmDise" :showList="selectOptions" valueName="diagName" @loadmore="loadmore" @remoteMethod="remoteMethod" @visibleChange="visibleChange" @change="(val) => change(val, 'tcmDiseCode')"></selectLoadmore>
- </template>
- <script>
- data() {
- return {
- // 搜索,远程,懒加载下拉相关数据
- querys: '', // 远程搜索输入的内容
- selectLoading: false, //select加载
- stopLoading: false, // 最后一次加载之后,不再加载
- pageData: {
- // 懒加载相关参数,这里代表从第一条数据开始加载,一次加载十项
- current: 1,
- size: 10
- },
- selectOptions: [],
- }
- },
- methods: {
- // 下拉框出现、隐藏
- visibleChange(val) {
- if (!val) {
- //隐藏
- // 重置懒加载
- this.stopLoading = false
- // 重置数据
- this.querys = null
- this.pageData = {
- // 懒加载相关参数,这里代表从第一条数据开始加载,一次加载十项
- current: 1,
- size: 10
- }
- this.selectOptions = []
- }
- },
- // 自定义指令的方法:下拉框滚动到底懒加载
- loadmore() {
- if (!this.stopLoading) {
- this.pageData.current++ // 搜索下一页
- this.getTypeOption(this.pageData) //调用接口获取下拉框数据
- }
- },
- // 远程搜索物料类别
- remoteMethod(query) {
- this.querys = query // 保存搜索内容
- // 重置懒加载
- this.stopLoading = false
- this.pageData = {
- current: 1,
- size: 10
- }
- let params = this.pageData
- params.query = query
- // 调用接口
- this.selectLoading = true
- _interface(params).then((res) => {
- if (res.code == 200) {
- this.selectOptions = res.result.records
- } else {
- this.$message({ type: 'error', message: '错误返回提示' })
- }
- this.selectLoading = false
- })
- },
- // 获取物料类别下拉内容
- getTypeOption(params) {
- params.query = this.querys
- this.selectLoading = true
- _interface(params).then((res) => {
- if (res.code == 200) {
- // 如果某次返回值是[],表示已经加载完了,不必再加载
- if (res.result.records.length == 0) {
- this.stopLoading = true
- return
- }
- if (params.current == 1) {
- // 保存数据
- this.selectOptions = res.result.records
- } else {
- this.selectOptions = [...this.selectOptions, ...res.result.records]
- }
- } else {
- this.$message({ type: 'error', message: '错误返回提示' })
- }
- this.selectLoading = false
- })
- },
- // 西医
- change(obj, key) {
- this.base[key] = obj.diagCode
- }
- }
- </script>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。