elementUI组件下拉框属性的一些配合使用

news2024/12/26 0:49:10

文章目录

  • 1、单选带搜索功能（自定义搜索）
  • 2、下拉多选+远程搜索
  • 3、下拉多选+有默认选项
  • 4、下拉多选+默认禁用

只提供大致思路，大量玩法等你开发【doge】

1、单选带搜索功能（自定义搜索）

例如，我需要实现一个功能：搜索指定姓开头的所有名字（中文）。下面我就直接省略了表单form组件了哈（一般像这类选择框、输入框等组件都是写在el-form中的）。

官方提供了一个属性：filterable，添加它就可以直接实现模糊查询的效果，不过我们的目的是实现查询某个姓开头的所有名字这个查询逻辑，所以要自定义一个方法，因此我们要用到官方提供的另一个属性：filter-method，filter-method为一个Function类型，它会在输入值发生变化时调用，参数为当前输入值。当然，在使用这个属性时，filteralbe属性也不能丢。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入vue -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <script src="../vue/vue.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- 浏览器引入mockjs文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>

    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <template>
        <!-- 匹配指定姓的全部姓名 -->
        <!-- last name是姓的意思 -->
        <el-select
          filterable
          v-model="searchValue"
          placeholder="请输入姓名中的姓（中文）"
          :filter-method="getNameByLastName"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </div>
    <script>
      // mock模拟数据
      var Random = Mock.Random;
      // 生成一个包含20个对象类型的元素的数组
      let data = Mock.mock({
        "list|10": [
          {
            "value|+1": 0,
            label: () => {
              return Random.cname();
            },
          },
        ],
      });

      console.log(data);
      Vue.config.productionTip = false;

      new Vue({
        el: "#app",
        data() {
          return {
            searchValue: "",
            options: data.list,
          };
        },
        methods: {
          // 重新定义搜索规则：获取指定姓相关的全部姓名
          getNameByLastName(val) {
            this.searchValue = val;
            if (val) {
              this.options = data.list.filter((item) => {
                console.log(item.label.split("")[0]);
                return item.label.split("")[0] == val;
              });
            } else {
              this.options = data.list;
            }
          },
        },
      });
    </script>
  </body>
</html>

效果如下：
请添加图片描述

2、下拉多选+远程搜索

如标题所示，我们将实现两个功能，多选+远程搜索，多选将用到multiple属性启用多选，此时v-model接收的是一个数组，远程搜索将用到filterable（开启查询）属性和remote（开启远程搜索）属性，并在使用时将两者设置为true，同时传入一个remote-method属性，该属性接收一个Function，会在输入值发生变化时调用，参数表示当前输入的值。此外，如果数据比较多，那么远程搜索的展示就会很慢，所以我们需要loading属性来显示数据未展示时的效果。

下面，我们将实现功能，不过在那之前，我们得先知道，后端传到前端的数据的格式不一定就会是options需要的形式（options[{value:xxx,lable:xxx}])， 有可能就只是一个普通的字符串数组，所以我们需要转换格式。此外，下面的方式并未调用远程接口，只是简单的对本地数据进行操作，所以会用到定时器函数模拟获取远程数据时的延迟效果。

那么，接下来，我们展示代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入vue -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <script src="../vue/vue.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- 浏览器引入mockjs文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>

    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <template>
        <el-select
          multiple
          filterable
          remote
          :remote-method="remoteMethod1"
          v-model="values1"
          :loading="loading1"
          placeholder="请输入姓名"
          clearable
          no-data-text="没有这个名字哦"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        &nbsp; &nbsp; &nbsp; &nbsp;
        <el-select
          multiple
          filterable
          remote
          :remote-method="remoteMethod2"
          v-model="values2"
          :loading="loading2"
          placeholder="请输入姓名"
          clearable
          no-data-text="没有这个名字哦"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </div>
    <script>
      // mock模拟数据
      var Random = Mock.Random;

      // 生成一个包含20个对象类型的元素的数组
      let data1 = Mock.mock({
        "list|20": [
          {
            "value|+1": 0,
            label: "@cname",
          },
        ],
      });

      // 生成一个包含20个字符串元素的数组
      let data2 = Mock.mock({
        "list|20": [
          () => {
            return Random.cname();
          },
        ],
      });

      Vue.config.productionTip = false;

      new Vue({
        el: "#app",
        data() {
          return {
            values1: [],
            values2: [],
            loading1: false,
            loading2: false,
            options1: [],
            options2: [],
            list: [],
          };
        },
        mounted() {
          this.options1 = data1.list;
          console.log(this.options1, "this.options1 ===========");

          // 将字符串数组转为指定对象形式的数组{value:xxx,label:xxx}
          this.list = data2.list.map((item, index) => {
            return { value: index, label: item };
          });
          this.options2 = this.list;

          console.log(data2.list, "data2.list ===============");
          console.log(this.options2, "this.options2 ==============");
        },
        methods: {
          remoteMethod1(query) {
            if (query !== "") {
              this.loading1 = true;
              setTimeout(() => {
                this.loading1 = false;

                // 过滤出匹配的数据
                this.options1 = data1.list.filter((item) => {
                  return (
                    item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
                  );
                });
              }, 2000);
            } else {
              this.options1 = [];
            }
          },

          remoteMethod2(query) {
            if (query !== "") {
              this.loading2 = true;
              setTimeout(() => {
                this.loading2 = false;
                
                // 过滤出匹配的数据
                this.options2 = this.list.filter((item) => {
                  return (
                    item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
                  );
                });
              }, 2000);
            } else {
              this.options2 = [];
            }
          },
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

补充：如果不想一开始就显示出下拉选项，那么在上述代码的mounted钩子中，你可以不对options进行赋值，这样就能达到想要的效果了。

3、下拉多选+有默认选项

例如，我们想要options.value=3的选项默认展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入vue -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <script src="../vue/vue.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- 浏览器引入mockjs文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>

    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <template>
        <el-select
          multiple
          filterable
          remote
          :remote-method="remoteMethod"
          v-model="values"
          :loading="loading"
          placeholder="请输入姓名"
          clearable
          no-data-text="没有这个名字哦"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>
    </div>
    <script>
      // mock模拟数据
      var Random = Mock.Random;

      // 生成一个包含20个对象类型的元素的数组
      let data = Mock.mock({
        "list|20": [
          {
            "value|+1": 0,
            label: "@cname",
          },
        ],
      });

      console.log(data, "data ==========");

      Vue.config.productionTip = false;

      new Vue({
        el: "#app",
        data() {
          return {
            values: [],
            loading: false,
            options: [],
          };
        },
        mounted() {
          // 什么时候需要重新置为空数组? => 如果打开某个组件，这个组件上次打开时的数据没有被清除，同时这次数据又被添加上去的时候
          //   this.values = [];
          //   this.options = [];

          data.list.forEach((item) => {
            if (item.value == 3) {
              this.values.push(item.value);
              /* 
              注意：一定要加下面这行代码给options赋值，
              否则，到时选择项显示的将会是value的值，而不是label的值
              */
              this.options.push(item);
            }
          });
        },
        methods: {
          remoteMethod(query) {
            if (query !== "") {
              this.loading = true;
              setTimeout(() => {
                this.loading = false;

                // 过滤出匹配的数据
                this.options = data.list.filter((item) => {
                  return (
                    item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
                  );
                });
              }, 1000);
            } else {
              this.options = [];
            }
          },
        },
      });
    </script>
  </body>
</html>

在这里插入图片描述

4、下拉多选+默认禁用

要实现的效果如图：
请添加图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入vue -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script> -->
    <script src="../vue/vue.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- 浏览器引入mockjs文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>

    <title>Document</title>
    <style>
      /* 消除tag标签后面的x */
      /* .el-select .el-select__tags i {
        display: none;
      } */
    </style>
  </head>
  <body>
    <div id="app">
      <template>
        <el-select
          multiple
          filterable
          remote
          :remote-method="remoteMethod"
          v-model="values"
          :loading="loading"
          placeholder="请输入姓名"
          clearable
          no-data-text="没有这个名字哦"
          @clear="clearName"
          @remove-tag="removeTag"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          >
          </el-option>
        </el-select>
      </template>
    </div>
    <script>
      // mock模拟数据
      var Random = Mock.Random;

      // 生成一个包含20个对象类型的元素的数组
      let data = Mock.mock({
        "list|20": [
          {
            "value|+1": 0,
            label: "@cname",
          },
        ],
      });

      console.log(data, "data ==========");

      Vue.config.productionTip = false;

      new Vue({
        el: "#app",
        data() {
          return {
            values: [],
            loading: false,
            options: [],
          };
        },
        mounted() {
          // 什么时候需要重新置为空数组? 
          // => 如果打开某个组件，这个组件上次打开时的数据没有被清除，
          // 同时这次数据又被添加上去的时候
          //   this.values = [];
          //   this.options = [];

          // 第一种方式：
          data.list.forEach((item) => {
            if (item.value == 3) {
              this.values.push(item.value);
              /*
                   注意：一定要加下面这行代码给options赋值，
                   否则，到时选择项显示的将会是value的值，而不是label的值
                   */
              this.options.push(item);
              item.disabled = true; // 设置选项不可用
            }
          });

          // 第二种实现方式：
          //   this.values = [3]; // 要禁用的选项放在数组中
          //   data.list.forEach((item) => {
          //     this.values.forEach((val) => {
          //       if (item.value === val) {
          //         item.disabled = true;
          //         this.options.push(item);
          //       }
          //     });
          //   });
        },

        methods: {
          // 远程查询
          remoteMethod(query) {
            if (query !== "") {
              this.loading = true;
              setTimeout(() => {
                this.loading = false;

                // 过滤出匹配的数据
                this.options = data.list.filter((item) => {
                  return (
                    item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
                  );
                });
              }, 1000);
            } else {
              this.options = [];
            }
          },

          // 下拉框所选数据的清除（不清除默认值）
          clearName() {
            // 只要让默认选项的value值一直存在即可避免被清除
            this.values = [3];
          },

          /**
           * @description: 移除tag时触发的事件
           * @param item 在这里指的是所选值的value值，也就是options数组下面每一个对象的value值
           */
          removeTag(item) {
            // 当要删除的tag的value值不等于3时
            if (item !== 3) {
              console.log(item);
            }
            // 当要删除的tag的value等于3时，让它不能删除默认值
            else {
              this.values = [3];
              /*
              我这保留默认项（默认项不能被删除）一直没想到什么好办法，
              只能让this.values重新进行赋值，让他达到看起来没被删除的效果，
              有懂得大佬可以提供下思路吗
              */
            }
          },
        },
      });
    </script>
  </body>
</html>

其他待补充doge

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

关于学习的一些建议

关于学习的一些建议

本文的主要讲的内容如图&#x1f447; 文末附有整个Java的学习路线、能力提升和学习建议的思维导图。 快过新年了&#xff01;在过去的一年里&#xff0c;你们收获了什么呢&#xff1f;在未来的一年里&#xff0c;你们有什么新目标吗&#xff1f; 1.定目标 过去的我往往喜欢…
阅读更多...
初识 Django

初识 Django

初识 Django参考描述优劣 Django&#xff08;部分&#xff09;优势功能完备&#xff0c;开箱即用开发效率高Admin 管理后台安全ORM可扩展劣势性能模板过渡封装获取长期支持版&#xff08;Long Time Support&#xff0c;LTS&#xff09;PIP官网获取检测MVC 与 MVTMVC 架构MTV 架…
阅读更多...
力扣sql基础篇(十一)

力扣sql基础篇(十一)

力扣sql基础篇(十一) 1 每件商品的最新订单 1.1 题目内容 1.1.1 基本题目信息1 1.1.2 基本题目信息2 1.1.3 示例输入输出 a 示例输入 b 示例输出 1.2 示例sql语句 SELECT p.product_name,o1.product_id,o1.order_id,o1.order_date FROM Orders o1 INNER JOIN ( SELECT pro…
阅读更多...
Android自定义绘制1-1 Plus

Android自定义绘制1-1 Plus

上一个文章是看着扔物线的视频写的。写玩之后&#xff0c;发现他的文章还有很多内容。尴尬。 接着写呗。 自定义绘制知识的4个级别 1.Canvas的drawXXX()系列方法以及Paint类的一些常见方法。 canvas的drawXXX()是自定义绘制的最基本操作。掌握了这些方法&#xff0c;才知道…
阅读更多...
JNPF 3.4.5 java+.Net6 旗舰版企业版 简搭-敏捷业务低代码开发平台

JNPF 3.4.5 java+.Net6 旗舰版企业版 简搭-敏捷业务低代码开发平台

JNPF 低代码通常是指APaaS产品&#xff0c;通过为开发者提供可视化的应用开发环境&#xff0c;降低或去除应用开发对原生代码编写的需求量&#xff0c;进而实现便捷构建应用程序的一种解决方案。广义上低代码概念涵盖所有能够完成代码的集成&#xff0c;减少代码开发的应用过程…
阅读更多...
在哔站黑马程序员学习Spring—Spring Framework—（二）spring的注解开发学习笔记

在哔站黑马程序员学习Spring—Spring Framework—（二）spring的注解开发学习笔记

一、注解开发spring的强项—>简化开发spring从2.0开始逐步提供了各种各样的注解&#xff0c;到了2.5注解比较完善&#xff0c;到了3.0推出了纯注解开发,使用java类替代配置文件&#xff0c;开启了spring快速开发通道。二、注解开发定义bean不再需要在spring配置文件中定义be…
阅读更多...
拷贝实体的工具类---BeanObjectCopyUtils

拷贝实体的工具类---BeanObjectCopyUtils

目录 前言&#xff1a; 第一步&#xff1a;引用的核心类&#xff1a; 第一种&#xff1a;单个实体的拷贝方法 第二种&#xff1a;列表类的实体拷贝方法 第二步&#xff1a;核心方法的介绍&#xff1a; 核心方法一&#xff0c;介绍了实例化的操作&#xff1a; 核心方法二…
阅读更多...
CMMI之项目管理类

CMMI之项目管理类

项目管理类过程域涵盖了与项目的计划、监督和控制相关的项目管理活动。CMMI-DEV 中的七个项目管理类过程域是&#xff1a;• 集成项目管理&#xff08;Integrated Project Management&#xff0c; IPM&#xff09;• 项目监督与控制&#xff08;Project Monitoring and Control…
阅读更多...
蓝桥杯：城邦

蓝桥杯：城邦

题目链接 问题描述 答案提交 本题答案是&#xff1a;4046。 运行限制 思路分析 代码&#xff08;Java&#xff09; 问题描述 小蓝国是一个水上王国, 有 2021 个城邦, 依次编号 1 到 2021。在任意两 个城邦之间, 都有一座桥直接连接。 为了庆祝小蓝国的传统节日, 小蓝国政府…
阅读更多...
登录授权方案：JSON Web Tokens (JWT)

登录授权方案：JSON Web Tokens (JWT)

登录授权方案&#xff1a;JSON Web Tokens (JWT) JWT官方文档&#xff1a;https://jwt.io/introduction 1.简介&#xff1a; JWT 即 json web tokens&#xff0c;通过JSON形式作为Web应用中的令牌&#xff0c;用于在各方之间安全地将信息作为JSON对象传输&#xff0c;在数据传…
阅读更多...
【博客598】从netfilter hook执行原理分析iptables为什么自定义链无法主动调用只能从其它链跳转过来

【博客598】从netfilter hook执行原理分析iptables为什么自定义链无法主动调用只能从其它链跳转过来

从netfilter hook执行原理分析iptables为什么自定义链无法主动调用只能从其它链跳转过来 1、netfilter hook执行原理 netfilter 框架是 Linux 网络子系统里的一个核心模块&#xff0c;iptables 就是基于 netfilter 框架实现的一个网络包处理工具。 netfilter hook被调用后执行…
阅读更多...
2023年“科学探索奖”申报启动及指南

2023年“科学探索奖”申报启动及指南

2023年“科学探索奖”资助不超过50位青年科学家&#xff0c;每位获奖人5年内将获得总计300万元奖金。今年的申报时间为2023年1月1日至3月15日。获奖名单拟定于2023年8月揭晓。本文知识人网小编整理该奖项的概要及申报指南&#xff0c;以飨读者。“科学探索奖”是一项由科学家主…
阅读更多...
【高并发内存池】第二弹之threadcache 线程缓存

【高并发内存池】第二弹之threadcache 线程缓存

1.为什么线程向threadcache申请内存不需要加锁&#xff1f; 因为没有把cache设置成全局变量&#xff0c;而是使用了TLS(线程局部存储)&#xff0c;作用是当前内存只可当前线程见到&#xff0c;其他线程没有使用权&#xff0c;避免了加锁的操作&#xff0c;保证了线程数据的独立…
阅读更多...
基于paddlex图像分类模型训练（一）：图像分类数据集切分：文件夹转化为imagenet训练格式

基于paddlex图像分类模型训练（一）：图像分类数据集切分：文件夹转化为imagenet训练格式

背景 在使用paddlex GUI训练图像分类时&#xff0c;内部自动对导入的分类文件夹进行细分&#xff0c;本文主要介绍其图像分类数据切分源码&#xff0c;或可作为其他项目储备代码&#xff1a;https://github.com/PaddlePaddle/PaddleX/blob/develop/paddlex/tools/dataset_spli…
阅读更多...
[Linux]进程概念以及进程状态

[Linux]进程概念以及进程状态

&#x1f941;作者&#xff1a; 华丞臧. &#x1f4d5;​​​​专栏&#xff1a;【LINUX】 各位读者老爷如果觉得博主写的不错&#xff0c;请诸位多多支持(点赞收藏关注)。如果有错误的地方&#xff0c;欢迎在评论区指出。 推荐一款刷题网站 &#x1f449; LeetCode刷题网站 文…
阅读更多...
vs2019 + qt5.12.11 打包

vs2019 + qt5.12.11 打包

目录 你以为打包方式 实际要添加步骤 你以为打包方式 先吐槽一番&#xff0c;感觉vsqt打包有点巨坑&#xff0c;还是说我第一次打包其实都是这样子的 首先我们将生成的.exe弄到一个打包文件夹里面 然后嘞 我用qt自带的打包工具windeployqt exe &#xff08;因为我的再C盘下…
阅读更多...
Mysql基础篇（11）—— MySQL8.0新特性之窗口函数

Mysql基础篇（11）—— MySQL8.0新特性之窗口函数

举例1 假设我现在有这样一个数据表&#xff0c;它显示了某购物网站在每个城市每个区的销售额&#xff1a; CREATE TABLE sales( id INT PRIMARY KEY AUTO_INCREMENT, city VARCHAR(15), county VARCHAR(15), sales_value DECIMAL ); INSERT INTO sales(city,county,sales_val…
阅读更多...
【xgboost】XGBoost

【xgboost】XGBoost

XGBoost1. 原理改进及特点1.1 遵循Boosting算法的基本建模流程1.2 平衡精确性与复杂度1.3 降低模型复杂度、提升运行效率1.4 保留部份GBDT属性2. sklearn接口(回归)2.1 导库 & 数据2.2 sklearn api普通训练2.3 sklearn api交叉验证2.4 查看属性接口3. xgboost原生代码(回归…
阅读更多...
Redis数据持久化方案

Redis数据持久化方案

作为集中式缓存的优秀代表&#xff0c;Redis可以帮助我们在项目中完成很多特定的功能。Redis准确的说是一个非关系型数据库&#xff0c;但是由于其超高的并发处理性能&#xff0c;及其对于缓存场景所提供的一系列能力构建&#xff0c;使其成为了分布式系统中的集中缓存的绝佳选…
阅读更多...
深入学习Vue.js（十）异步组件和函数式组件

深入学习Vue.js（十）异步组件和函数式组件

文章目录异步组件需要解决的问题异步组件实现原理1.封装defineAsyncComponent函数2.超时与error3.延迟和Loading组件函数式组件异步组件需要解决的问题 允许用户指定加载出错时要渲染的组件允许用户指定Loading组件&#xff0c;以及展示该组件的延迟时间允许用户设置加载组件的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023