【Vue】el-select下选组件

系列文章

【Vue】vue增加导航标签
本文链接：https://blog.csdn.net/youcheng_ge/article/details/134965353

【Vue】Element开发笔记
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133947977

【Vue】vue，在Windows IIS平台部署
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133859117

【Vue】vue2与WebApi跨域CORS问题
本文链接：https://blog.csdn.net/youcheng_ge/article/details/133808959

【Vue】nvm安装教程（解决npm下依赖包版本冲突）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132896207

【Vue】vue开发环境搭建教程（详细）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/132689006

【Vue】日期格式化（全局）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135017332

【Vue】elementUI表格，导出Excel
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135018489

【Vue】el-date-picker日期范围组件（本周、本月、上周）
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135088143

【前端】前后端通信方法与差异
本文链接：https://blog.csdn.net/youcheng_ge/article/details/135153985

---

---

前言

本专栏为 前端【Vue】专栏，主要介绍Vue知识点。对于刚进入计算机世界的学生来说，学习课本上的知识是远远不够的，并且国内教材偏旧，所以需要我们通过互联网自主学习。
这里普及一个知识：HTML已不仅仅只能开发 Web，也可以开发移动端（Android、iOS），所以本专栏也会介绍 移动端的开发。
我个人将移动端开发，分为两大方向：

①原生开发
最早一批，使用安卓开发工具包（Android SDK）和Java语言来开发App的方式。原生开发允许开发者充分利用安卓平台的功能和特性，以及庞大的安卓开发社区资源。但缺点就是门槛高、需要适配不同尺寸的屏幕、测试繁琐，对开发人员技术要求高。

②混合开发（加壳方式）
当前热门，使用Web技术（网页三剑客HTML、CSS和JavaScript）开发App的方式，使用 vue.js、node.js、Angular.js、React.js、api.js等框架开发。混合开发具有较高的开发效率和跨平台的优势，由于使用Web技术进行 界面渲染样式丰富、屏幕适配（栅格技术自适应）效果好。但缺点就是对底层硬件调用库尚不完善，有时候会发生异常，对框架依赖较高，不过库在不断完善中，主要的相机、相册、GPS、存储调用是没有问题的。

Vue是前端开发中的一个分支，它基于标准 HTML、CSS 和 JavaScript 构建，学习Vue不可以速成，得先熟悉网页三剑客（HTML、CSS和JavaScript）。Vue是一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

一、技术介绍

本文基于elementUI el-select 组件，进行二次封装，做成了子组件，可以在自己的项目中使用。
为什么这样做？那是因为我在使用 change事件时，效果不理想，无法触发在值改变后，向父组件传输参数。

这里用到以下技术：

1、父组件向子组件传参
2、子组件向父组件传参
3、watch监听，参数变化
4、生命周期（节点）钩子：created() 、 mounted() 。

二、项目源码

2.1 创建下拉框子组件

为了和官网区分，我们自己的名字为 SelectCustom。

位置：src\components\SelectCustom\xingHaoCustom.vue
解析：
·1、监听器watch作用有两个：日期改变时，将子组件的值回传给父组件；日期控件清空时，它会赋值为null，底层会报错的，我们必须将其重置为空串。
2、created() 页面已创建时，需要初始化默认值，也就是父组件传来的值。
3、@change 是下拉框的改变事件，目的为了可以传键值对，有时候我们也需要 key。

<!-- 
 @desc 造轮子
 @author gyc
 @date 2023-12-18
 @note 砂型号通用组件（不要随意修改）
 -->
<template>
  <div class="content">
    <el-select
      v-model="retvalue"
      placeholder="请选择砂型号"
      filterable
      default-first-option
      @change="handleSelectModel"
    >
      <el-option
        v-for="item in modelOptions"
        :key="item.key"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script>
export default {
  name: "XingHaoCustom",
  // 接收父组件传递的值
  props: {
    defaultValue: {
      // type: Text,
      required: false,
      default: "",
    },
  },
  data() {
    return {
      //  砂型号
      modelOptions: [
        {
          key: "10",
          value: "一型",
        },
        {
          key: "15",
          value: "一型半",
        },
        {
          key: "20",
          value: "二型",
        },
        {
          key: "30",
          value: "三型",
        },
        {
          key: "40",
          value: "四型",
        },
        {
          key: "60",
          value: "六型",
        },
        {
          key: "70",
          value: "七型",
        },
        {
          key: "80",
          value: "八型",
        },
        {
          key: "90",
          value: "九型",
        },
      ],
      //返回值
      retvalue: "",
      retkey: "",
    };
  },
  watch: {
    retvalue: {
      handler(newVal) {
        // 清空重置值，为null报错
        if (newVal == null) {
          this.retvalue = "";
        }
        // $emit() 向外触发父组件中方法
        this.$emit("handleSelectXingHao", {
          key: this.retkey,
          value: this.retvalue,
        });
      },
    },
  },
  created() {
    // 初始化值
    this.handleDefaultValue();
  },
  methods: {
    handleDefaultValue() {
      //父组件传的默认值
      this.retvalue = this.defaultValue;
    },

    handleSelectModel(e) {
      let obj = {};
      obj = this.modelOptions.find((item) => {
        return item.value === e;
      });
      this.retkey = obj.key;
    },
  },
};
</script>

2.2 父组件声明

import XingHaoCustom from "@/components/SelectCustom/xingHaoCustom";

  components: {
    YGuiGeCustom,
    XingHaoCustom,
  },

2.3 父组件使用

 <el-form-item label="砂型号" prop="砂型号">
   <xing-hao-custom
     :defaultValue="postForm.砂型号"
     @handleSelectXingHao="handleSelectXingHao"
   >
   </xing-hao-custom>
 </el-form-item>

2.4 子组件回调父组件方法

 /**
  * 接收子传父的数据
  */
    handleSelectXingHao(val) {
      this.postForm.砂型号编码 = val.key;
      this.postForm.砂型号 = val.value;
    },

注意：这里我们子组件可以传键值对过来，不是单纯的值.

三、效果展示

3.1 前端页面

下拉框，我们使用自己的子组件。

3.2 服务器接收

我们来看看，编码key 有没有获取到。打个断点服务器端接收查看一下接收参数。

我们前端定义的 “二型”，编码就是"20"，完全正确。

四、资源链接