对el-select封装成组件使用

效果与直接使用el-select一样,多处用el-select显得代码冗余就进行了封装

效果图:

el-select封装:

<template>
  <div class="my-select">
    <el-select
      v-model="person.modelValue"
      :placeholder="placeholder"
      @change="changeSelect"
    >
      <el-option
        v-for="item in options"
        :key="item[val]"
        :label="item[name]"
        :value="item[val]"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script setup>
import { reactive,  watch } from "vue";
const emits = defineEmits(["onChange"]);
let props = defineProps({
  val: {
    type: String,
    default: "value",
  },
  name: {
    type: String,
    default: "label",
  },
  placeholder: {
    type: String,
    default: "请选择",
  },

  options: {
    type: Array,
    default: [],
  },
  value: {
    type: [Number, String],
    default: "",
  },
});
console.log(props);
const person = reactive({
  modelValue: "",
});
function changeSelect(val) {
  emits("onChange", val);
}
watch(
  () => props.value,
  (val) => {
    // 用于回显
    person.modelValue = val;
  },
  { deep: true, immediate: true }
);

</script>
<style scoped lang='less'>
</style>

功能组件内使用el-select封装组件:

<template>
  <div>
    <el-form ref="form" label-width="120px" label-position="left">
      <el-form-item label="选择第几个选项">
        <MySelect
          width="220px"
          title="确定"
          @onChange="addDeciceType"
          :options="person.optionsList"
          :val="'val'"
          :name="'name'"
          placeholder="请选择"
          :value="1"
        >
        </MySelect>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import MySelect from "../components/MySelect.vue";
const person = reactive({
  optionsList: [
    { name: "第1个选项", val: 1 },
    { name: "第2个选项", val: 2 },
    { name: "第3个选项", val: 3 },
  ],
});
function addDeciceType(val) {
  console.log(val);
}
onMounted(() => {});
</script>
<style scoped lang='less'>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/209185.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

H5 Canvas 打飞机青春版

没事儿写写练习一下&#xff0c;说不准哪天就用到今天所用到的知识点了呢。 在线链接 https://linyisonger.github.io/H5.Examples/?name./053.%E9%A3%9E%E6%9C%BA%E5%A4%A7%E6%88%98.html 功能清单 循环滚动背景 矩形碰撞 随机生成敌人 飞机左右移动 苹果屏蔽长按 移动端屏…

京东数据运营-京东数据开放平台-鲸参谋10月粮油调味市场品牌店铺销售数据分析

鲸参谋监测的京东平台10月份料油调味市场销售数据已出炉&#xff01; 根据鲸参谋数据显示&#xff0c;今年10月份&#xff0c;京东平台粮油调味市场的销量将近4600万&#xff0c;环比增长约10%&#xff0c;同比降低约20%&#xff1b;销售额将近19亿&#xff0c;环比增长约4%&am…

(C++)三数之和--双指针法

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 算法原理 双指针法&#xff0c;不一定是说就要使用指针&#xff0c;只是一种形象的说法&#xff0c;在数组中&#xff0c;我们一般将数组下标当做指针。我们首先对数组进行排序&#xff0c;从左向右标定一个下标i&#xff0…

LED屏幕信息安全如何预防?

随着科技的不断进步&#xff0c;LED屏幕在我们生活和工作中扮演着越来越重要的角色&#xff0c;然而&#xff0c;随之而来的是信息安全面临的挑战。为了有效预防LED屏幕信息的泄露和被盗取&#xff0c;我们需要采取一系列的安全措施。以下是一些建议&#xff1a; 物理安全措施&…

中国毫米波雷达产业分析6——毫米波雷达行业发展展望

一、行业发展驱动力分析 &#xff08;一&#xff09;需求带动 当前&#xff0c;全球智能化变革浪潮正在汽车、交通、安防、工业、家居、健康监护等诸多产业蓬勃发展&#xff0c;创造了巨大的感知产品增量需求。 在汽车领域&#xff0c;毫米波雷达传感器作为一种非接触…

【无标题】mmocr在云服务器上

这里写目录标题 1、创建虚拟环境2、切换和退出conda虚拟环境3. 显示、复制&#xff08;克隆&#xff09;、删除虚拟环境4、删除环境安装指示中 cd进项目文件夹开始训练模型&#xff08;python XXX.py | tee record.txt 记录训练结果&#xff09;如何在Linux服务器上安装Anacond…

leetcode刷题详解—— 环形子数组的最大和

1. 题目链接&#xff1a;918. 环形子数组的最大和 2. 题目描述&#xff1a; 给定一个长度为 n 的环形整数数组 nums &#xff0c;返回 nums 的非空 子数组 的最大可能和 。 环形数组 意味着数组的末端将会与开头相连呈环状。形式上&#xff0c; nums[i] 的下一个元素是 nums[(…

SAP 如何检查已安装的SAP UI5 版本

第一个方法是直接从FLP中查看 但是部分高版本的FLP中没有这个about&#xff0c; 那么在当前界面可以使用&#xff1a;CTRL ALT SHIFT S 查看当前版本 根据此版本&#xff0c;去进行你的UI5的开发吧

NodeJS(二):npm包管理工具、yarn、npx、pnpm工具等

目录 (一)npm包管理工具 1.了解npm 2.npm的配置文件 常见的配置属性 scripts属性*** 依赖的版本管理 3.npm安装包的细节 4.package-lock文件 5.npm install原理** 6.npm的其他命令 (二) 其他包管理工具 1.yarn工具 基本指令 2.cnpm工具 3.npx工具 (1)执行本地…

C++可表示的数(数组前面2个数的和)

void 可表示的数&#xff08;数组前面2个数的和&#xff09;() {int aa[]{1,2,3,4,5,6,7,8,9}, j 0, z 1, jj z, n 9, ge 0;string a "";while (j < n)//缘由https://bbs.csdn.net/topics/396063706?page1#post-410898529{if (jj < n)if (aa[j] aa[z] …

Android--Jetpack--Lifecycle详解

富贵本无根&#xff0c;尽从勤里得 一&#xff0c;定义 Lifecycle 是一个具备宿主生命周期感知能力的组件。它持有组件&#xff08;Activity/Fragment&#xff09;生命周期状态信息&#xff0c;并且允许其观察者监听宿主生命周期状态变化。 顾名思义&#xff0c;Lifecycle的主…

数据治理的具体应用

数据治理架构 图 13 描述的是公安数据治理框架&#xff0c;平台架构主要包括数据存储、数据计算、数据管理、数据应用这 4 个部分。 (1) 数据存储&#xff1a; 基于分布式的大数据存储平台&#xff0c;具有很强的存储能力和扩张能力&#xff1b; (2) 数据计算&#xff1a; …

目标检测——Faster R-CNN算法解读

论文&#xff1a;Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks 作者&#xff1a;Shaoqing Ren, Kaiming He, Ross Girshick, and Jian Sun 链接&#xff1a;https://arxiv.org/abs/1506.01497 代码&#xff1a;https://github.com/rbgirsh…

golang Pool实战与底层实现

使用的go版本为 go1.21.2 首先我们写一个简单的Pool的使用代码 package mainimport "sync"var bytePool sync.Pool{New: func() interface{} {b : make([]byte, 1024)return &b}, }func main() {for j : 0; j < 10; j {obj : bytePool.Get().(*[]byte) // …

Python 重要数据类型

目录 列表 序列操作 列表内置方法 列表推到式 字典 声明字典 字典基本操作 列表内置方法 字典进阶使用 字典生成式 附录 列表 在实际开发中&#xff0c;经常需要将一组&#xff08;不只一个&#xff09;数据存储起来&#xff0c;以便后边的代码使用。列表就是这样的…

JNPF低代码平台详解 -- 系统架构

目录 一、技术介绍 技术架构 二、设计原理 三、界面展示 1.代码生成器 2.工作流程 3.门户设计 4.大屏设计 5.报表设计 6.第三方登录 7.多租户实现 8.分布式调度 9.消息中心 四、功能框架 JNPF低代码是一款新奇、实用、高效的企业级软件开发工具&#xff0c;支持企…

柱状展示当中 ,如何给每个位置加多个项的办法

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>双柱修改</title> <script src"https://cdn.staticfile.org/Chart.js/3.9.1/chart.js"></script> </head> <body><canvas i…

分治算法——912. 排序数组

文章目录 &#x1f348;1. 题目&#x1f34c;2. 算法原理&#x1f34f;3. 代码实现 &#x1f348;1. 题目 题目链接&#xff1a;912. 排序数组 - 力扣&#xff08;LeetCode&#xff09; 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 示例 1&#xff1a; 输入&am…

【Vulnhub 靶场】【Funbox: Lunchbreaker】【简单】【20210522】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/funbox-lunchbreaker,700/ 靶场下载&#xff1a;https://download.vulnhub.com/funbox/FunboxLunchbreaker.ova 靶场难度&#xff1a;简单 发布日期&#xff1a;2021年05月22日 文件大小&#xff1a;1.6 GB 靶…

java: 警告: 源发行版 17 需要目标发行版 17

这是一个编译期的报错提示 源发行版 17 , 即说明你的maven项目当前指定的编译版本是jdk17&#xff0c;需要目标发行版 17则是说明你的idea中实际选择的jdk版本并非17 检查你项目中的pom文件中的配置 <properties><java.version>17</java.version><prop…