触底搜索下拉框

本文介绍了如何在Vue应用中使用SearchSelect组件,包括数据绑定、属性配置、方法如`searchoption`的实现以及参数解析过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


<template>
  <div>
    <!-- 搜索下拉框 -->
    <search-select
      v-model="currentValue"
      v-bind="attributes"
      :min-len="minilen"
      :search-method="searchoption"
      :disabled="disabled"
      :init-on-load="initOnLoad"
      :page-size="pageSize"
      :show-code="showCode"
      :allow-create="allowCreate"
      v-on="$listeners"
      @change="change"
    />
  </div>

</template>
<script>
import { getDict } from '@/api/dictDetail'
import SearchSelect from '@/components/SearchSelect'
export default {
  components: { SearchSelect },
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    minilen: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 15
    },
    initOnLoad: {
      type: Boolean,
      default: false
    },
    showCode: {
      default: false,
      type: Boolean
    },
    dict: {
      type: String,
      default: ''
    },
    allowCreate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentValue: this.value,
      parsed: {},
    };
  },
  computed: {
    parsedParams() {
      return this.parseParams()
    },
    attributes: function() {
      const attrs = this.$attrs || {}
      return attrs
    },
  },
  watch: {
    value(val) {
      this.currentValue = val;
    },
    currentValue(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    change(value) {
      this.$emit('change', value)
    },
    parseParams() {
      const n = this.dict
      if (!n) {
        return {
          'codetype': 'NIL'
        }
      }
      const index = n.indexOf('[')
      const params = {}
      if (index > -1) {
        const realName = n.substring(0, index)
        const expressionStr = n.match(/\[([\s\S]+)\]/)[1]
        const expressioins = expressionStr.split(',')
        params['codetype'] = realName
        if (expressioins && expressioins.length > 0) {
          for (const expression of expressioins) {
            const kvPair = expression.split('=')
            const k = kvPair[0]
            let v = kvPair[1]
            if (v.indexOf('{') === 0) {
              v = this.$data[v.replace(/[\{\}]/g, '')]
            }
            params[k] = v
          }
        }
      } else {
        params['codetype'] = n
      }

      return params
    },
    /* getPostData(val) {
      this.parsed = val;
    }, */
    searchoption(params) {
      const queryParam = Object.assign({
        matchfield: 'codecode',
        codevalue: params.keyword
      }, this.parsedParams)
      return getDict(queryParam, params.pageNo, params.pageSize)
    },
  }
}

</script>

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值