element el-select组件封装

最新推荐文章于 2024-03-07 10:03:59 发布

学不会•

最新推荐文章于 2024-03-07 10:03:59 发布

阅读量263

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_41588991/article/details/130519609

版权

该文章展示了如何在Vue.js中封装一个el-select组件，并实现模糊查询功能。组件使用v-model绑定数据，通过props传递属性如label和value，同时设置了filterable属性以支持模糊搜索。在change事件中，组件会触发自定义事件getValue和getOrgName，分别传递选中的值和label。

摘要由CSDN通过智能技术生成

el-select组件封装，并且做到模糊查询

// 我这里接口返回的数据 key 是 orgName 和 id，所以写成这样
<SearchAASelect v-model="search.orgId" title="机构名称" :options='options' :filterable='true' :props="{ label: 'orgName', value: 'id' }" />

<template>
  <div class="search-item">
    <label class="search-label">{{title}}：</label>
    <el-select v-model="selectValue" ref="selectLabel" @change="getValue" :filterable='filterable' clearable class="w-220" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item[props.label]" :value="item[props.value]" />
    </el-select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectValue: ''
    }
  },
  props: {
    value: {
      default: ''
    },
    title: {
      default: ''
    },
    options: {
      default: () => { }
    },
    props: {
      default: () => {
        return { label: 'label', value: 'value' }
      }
    },
    filterable: {
      default: false
    }
  },
  model: {
    prop: 'value',
    event: 'getValue'
  },
  watch: {
    value: {
      handler (v) {
        this.selectValue = v
      },
      deep: true
    }
  },
  created () {
    this.selectValue = this.value
  },
  methods: {
    getValue () {
      this.$emit('getValue', this.selectValue)
      // 获取label
      this.$nextTick(() => {
        this.$emit('getOrgName', this.$refs.selectLabel.selectedLabel)
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>