Vue3 Element Plus 封装 el-select - 附完整示例

Web - Nancy

于 2024-06-17 08:00:00 发布

阅读量1.3k

点赞数 27

本文链接：https://blog.csdn.net/m0_48968874/article/details/139355342

版权

Vue3 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

Element Plus

2 篇文章 0 订阅

订阅专栏

Element Plus

基于 Vue 3，面向设计师和开发者的组件库

3、change事件，子组件传值给父组件，更新值

效果

一、介绍

1、官方文档

一个 Vue 3 UI 框架 | Element Plus

一个 Vue 3 UI 框架 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/

2、官方示例

二、准备工作

1、安装依赖包

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2、示例版本

"element-plus": "^2.4.4",

三、使用步骤

1、element-plus自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

注：完整引入 / 按需导入 / 手动导入等方式请参照下方链接配置

快速开始 | Element Plus

1、绑定值

父组件： v-model:vModel="value"

子组件： v-model="vModel"

注：这里的父组件务必在v-model后面加上:vModel，选中值时用于更新值

2、远程搜索

输入关键字以从远程服务器中查找数据。

从服务器搜索数据，输入关键字进行查找。为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。 remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果 el-option 是通过 v-for 指令渲染出来的，此时需要为 el-option 添加 key 属性，且其值需具有唯一性，比如这个例子中的 item.id。具体示例在文末的完整示例部分展示。

3、change事件，子组件传值给父组件，更新值

选中值发生变化时触发。

将选中值的lable显示在数据框，在本示例中用的name，可根据实际情况做调整。具体示例在文末的完整示例部分展示。

emit('update:vModel', val);

注：这里务必保证与父组件的绑定值（v-model:vModel="value"）是相一致的，用于子组件向父组件传值更新值

四、完整示例

目录结构

src

--components

----select

------Index.vue

--views

----Example.vue

Index.vue

<template>
	<el-select
		v-model="vModel"
		filterable
		remote
		reserve-keyword
		:placeholder="props.placeholder"
		remote-show-suffix
		:remote-method="remoteMethod"
		@change="handleChange"
	>
		<el-option v-for="item in props.options" :key="item.id" :label="item.name" :value="item.id" />
	</el-select>
</template>

<script setup lang="ts" name="selectSearch">
import { ref, defineProps, watch, defineExpose } from 'vue';
const props = defineProps({
	vModel: {
		type: String,
		default: () => '',
		require: true,
	},
	placeholder: {
		type: String,
		default: () => '',
		require: true,
	},
	options: {
		type: Array,
		default: () => [],
		required: true,
	},
});

const vModel = ref('');

watch(
	() => props.options,
	(newValue, oldValue) => {},
	{ immediate: true, deep: true }
);

watch(
	() => props.vModel,
	(newValue, oldValue) => {
		vModel.value = props.vModel;
	},
	{ immediate: true, deep: true }
);

// 定义子组件向父组件传值/事件
const emit = defineEmits(['update:vModel', 'remote-method']);

const remoteMethod = (query?: string) => {
	emit('remote-method', query);
};

const handleChange = (val: string) => {
	emit('update:vModel', val);
};
</script>

Example.vue

<template>
  <div>
    <SelectSearch
      ref="selectSearch"
      v-model:vModel="value"
      :placeholder="placeholder"
      :options="data"
      @remote-method="remoteMethod"
      @update:vModel="handleUpDate"
    />
  </div>
</template>

<script setup lang="ts" name="example">
import { ref, defineAsyncComponent, onMounted } from 'vue';

// 引入组件
const SelectSearch = defineAsyncComponent(() => import('../components/select/Index.vue'));

// 定义变量
const value = ref('');
const data = ref([]) as any;
const placeholder = ref('请选择');

onMounted(() => {
  // 真实项目是根据请求接口获取数据
  data.value = [
    {
      id: '111',
      name: '数据A'
    },
    {
      id: '555',
      name: '数据D'
    },
    {
      id: '666',
      name: '数据F'
    }
  ]
})


// 可搜索下拉框
const remoteMethod = (query: string) => {
  // 真实项目是根据query参数请求接口获取数据 
  data.value = [
    {
      id: '111',
      name: '数据A'
    },
    {
      id: '222',
      name: '数据B'
    },
    {
      id: '333',
      name: '数据C'
    }
  ]
};

const handleUpDate = (v: any) => {
	data.value.map((item: { id: any; name: any }) => {
		if (item.id === v) value.value = item.name;
	});
	value.value = v;
};
</script>