Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.5k views
in Technique[技术] by (71.8m points)

element-plus的select问题

问题:select组件显示出下拉框后就不会隐藏了

我二次封装的el-select组件

<template>
  <el-select v-model="componentValue" :placeholder="placeholder" :multiple="multiple" clearable 
    :filterable="filterable" :remote="remote" :remote-method="remoteMethod" :loading="loading" @change="changeValueFunction"
    @visible-change="visibleChangeFunction" :style="'width:' + width + '!important'">
    <el-option v-for="(item,index) in list" :key="item.id + index" :label="item.value || item.name" :value="item.id">
    </el-option>
  </el-select>
</template>
<script>
  import { computed, toRefs } from 'vue';
  export default {
    props:{
      list: {
        default: () => []
      },
      placeholder: {
        default: ""
      },
      multiple: {
        default: false
      },
      width: {
        default: "135px"
      },
      filterable: {
        default: false
      },
      remote: {
        default: false
      },
      loading: {
        default: false
      },
      remoteMethod: {
        default: () => {}
      },
      modelValue: {}
    },
    setup(props, { emit }){
      const { modelValue } = toRefs(props);
      const componentValue = computed({
        get: () => modelValue.value,
        set: (n) => {}
      })

      const changeValueFunction = (value) => {
        emit("change", value);
        selectCallBack(value);
      }

      const selectCallBack = (value) => emit("update:modelValue", value)

      const visibleChangeFunction = (isShow) => {
        emit("handleVisibleChange", isShow)
      }

      return {
        componentValue,
        visibleChangeFunction,
        selectCallBack,
        changeValueFunction
      }
    },
  }
</script>
<style scoped>
</style>

在父组件调用

<crm-select 
    :list="followupWayList" 
    v-model="form.followWay" 
    placeholder="跟进方式"
    @handleVisibleChange="handleFollowupWay"
>
</crm-select>

显示出下拉框后一直这样子,不会隐藏
image.png

求教一下各位大佬是怎么回事


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...