select组件的二次封装_vue3 二级封装a-select-优快云博客

本文介绍了如何对select组件进行二次封装，包括组件代码实现和具体使用方法，同时提及了插槽和组件注册等关键知识点，适合已熟悉Vue基础的同学深入学习。

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

封装后的select.vue组件代码

<template>
  <div>
      <el-select v-model="value" placeholder="请选择">
          <el-option       
            v-for="item in initNewOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
      </el-select>
      <div>
        <slot :user="options"></slot>
      </div>
  </div>
</template>

<script>
export default {
  name: '',
  props:{
    configDataClass:{
      type:Array,
      default:()=>{}
    }
  },
  data () {
    return {
      value:'',
      options:[
          {value:"name",label:"姓名"},
          {value:"phone",label:"手机号"},
          {value:"email",label:"邮箱"},
          // 有新的需要匹配的可以继续添加
      ],
      initNewOption:[] //直接对原始的options修改是不合理的，所以将过滤过的options赋值给定义的新options
    }
  },
  methods: {
    // 通过过滤options中的内容来匹配configDataClass
    initOptions(){
      let optionArr=[]
      this.configDataClass.forEach(item=>{
        let arr=this.options.filter(elem=>elem.value===item)[0]
        console.log(arr)
        optionArr.push(arr)
        
      })
      this.initNewOption=optionArr   
      console.log(optionArr)
    }
    
  },
  mounted(){
    this.initOptions()
  }
}
</script>

<style scoped lang='scss'>

</style>

组件的具体使用

<template>
  <div>
      <el-row :gutter="14">
        <el-col :span='2'>关键词：</el-col>
        <el-col :span='3'>
        <!-- select 组件部分-->
            <Select :configDataClass="configData" >
            <!-- 插槽部分-->
                <template v-slot:default="slotProps">
                    {{slotProps.user}}
                </template>
            </Select>
        </el-col>
        <el-col :span='5'>
            <el-input> </el-input>
        </el-col>
        <el-col :span='10'>
            <el-button type="danger">搜索</el-button>
        </el-col>
        <el-col :span="4">
            <el-button type="danger" class="pull_right" size="small">新增用户</el-button>
        </el-col>
      </el-row>
  </div>
</template>

<script>
//局部导入组件
import Select from '@c/Select.vue' //@c是配置的config.js项，等同于src/components
export default {
  name: '',
  components:{Select}, //局部组件的注册
  data () {
    return {
      configData:["name","phone"],
    }
  },
  methods: {}
}
</script>

<style scoped lang='scss'>
  .pull_right{
    float: right;
  }
</style>

当然，里面也涉及到了插槽，组件的注册使用，不理解这些知识点的同学可以先看下文档，或者论坛找下，后续有时间了继续更新。。。