02_ElementUI

一.前端工程化

1.1 概述

前端工程化是使用软件工程的方法来单独解决前端的开发流程
中模块化、组件化、规范化、自动化的问题,其主要目的为了
提高效率和降低成本。

1.2 NodeJS的安装

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环
境，可以使 JavaScript 运行在服务器端。使用 Node.js，可以
方便地开发服务器端应用程序，如 Web 应用、API、后端服
务，还可以通过 Node.js 构建命令行工具等

打开官网https://nodejs.org/en下载对应操作系统的 LTS
版本。

双击安装包：

选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

1.3 npm 配置和使用

NPM全称Node Package Manager，是Node.js包管理工具，
是全球最大的模块生态系统，里面所有的模块都是开源免费
的；也是Node.js的包管理工具，相当于后端的Maven 。

安装node，自动安装npm包管理工具！

        *配置全局依赖下载后存储位置
创建一个新的全局依赖存储目录，例如
D:\develop\GlobalNodeModules

打开命令行终端，执行以下命令来配置新的全局依赖存储
路径：

npm config set prefix "D:\develop\GlobalNodeModules"

确认配置已生效，可以使用以下命令查看当前的全局依赖
存储路径：

npm config get prefix

切换npm的淘宝镜像，使用管理员身份运行命令行，在命
令行中，执行如下指令：

npm config set registry https://registry.npmmirror.com

确认配置已生效，可以使用以下命令查看当前 registry 的配置：

npm config get registry

1.4 Vue-cli安装：

我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成
的，用于快速的生成一个Vue的项目模板。Vue-cli主要提供了
如下功能：

        *统一的目录结构
        *本地调试
        *热部署
        *单元测试
        *集成打包上线

我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程
化依赖的环境。所以我们需要先安装NodeJS，然后才能安装
Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

二.Vue项目介绍

通过cmd命令先进入到图形化界面，然后再进行vue工程的创建

进入后输入指令 

vue ui

选择创建按钮创建项目，如下图所示

然后预设模板选择手动，如下图所示：

然后再功能页面开启路由功能，如下图所示：

然后再配置页面选择语言版本和语法检查规范，如下图所示：

然后创建项目，进入如下界面：

最后我们只需要等待片刻，即可进入到创建创建成功的界
面，如下图所示：

2.2 vue项目目录结构介绍

通过VS Code打开之前创建的vue文件夹，打开之后，呈现
如下图所示页面：

vue项目的标准目录结构以及目录对应的解释如下图所示:

public/ 目录：用于存放一些公共资源，如 HTML 文件、图
像、字体等，这些资源会被直接复制到构建出的目标目录
中

src/ 目录：存放项目的源代码，包括 JavaScript、CSS、
Vue 组件、图像和字体等资源。在开发过程中，这些文件
会被 Vite 实时编译和处理，并在浏览器中进行实时预览和
调试。以下是src内部划分建议：

        assets/目录：用于存放一些项目中用到的静态资源，如
        图片、字体、样式文件等。

        components/ 目录：用于存放组件相关的文件。组件
        是代码复用的一种方式，用于抽象出一个可复用的 UI
        部件，方便在不同的场景中进行重复使用。

        router/ 目录：用于存放 Vue.js 的路由配置文件，负责
        管理视图和 URL 之间的映射关系，方便实现页面之间
        的跳转和数据传递

vue.config.js 文件：Vite 的配置文件，可以通过该文件配
置项目的参数、插件、打包优化等。该文件可以使用
CommonJS 或 ES6 模块的语法进行配置。

package.json 文件：标准的 Node.js 项目配置文件，包含
了项目的基本信息和依赖关系。其中可以通过 scripts 字段
定义几个命令，如 dev、build、serve 等，用于启动开
发、构建和启动本地服务器等操作。

2.3 运行vue项目

第一种方式：通过VS Code提供的图形化界面 ，如下图所示：

点击之后，我们等待片刻，即可运行，在终端界面中，我们发
现项目是运行在本地服务的8080端口，我们直接通过浏览器
打开地址

最终浏览器打开后，呈现如下界面，表示项目运行成功

对于8080端口，经常被占用，所以我们可以去修改默认的
8080端口。我们修改vue.config.js文件的内容，添加如下代
码：

module.exports = defineConfig({
transpileDependencies: true,
devServer:{
port: 9000
}
})

第二种方式：命令行方式
直接基于cmd命令窗口，在vue目录下，执行输入命令npm
run serve即可，如下图所示：

补充：NPM脚本窗口调试出来


第一步：通过设置/用户设置/扩展/MPM更改NPM默认配置，
如下图所示

然后重启VS Code，并且双击打开package.json文件，然后
点击资源管理器处的3个小点，勾选npm脚本选项，如图所示

然后就能都显示NPM脚本小窗口了。

2.4 Vue项目开发流程

那么我们访问的首页是index.html，但是我们找到
public/index.html文件，打开之后发现，里面没有什么代
码，但是能够呈现内容丰富的首页：如下图所示：

对于vue项目，index.html文件默认是引入了入口函数main.js
文件，我们找到src/main.js文件，其代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')

上述代码中，包括如下几个关键点：

        import: 导入指定文件，并且重新起名。例如上述代码
        import App from ./App.vue'导入当前目录下得App.vue并
        且起名为App
        new Vue(): 创建vue对象
        $mount('#app');将vue对象创建的dom对象挂在到id=app
        的这个标签区域中，作用和之前学习的vue对象的le属性一
        致。
        router: 路由，详细在后面的小节讲解

        render: 主要使用视图的渲染的。

此时我们知道了vue创建的dom对象挂在到id=app的标签区
域，但是我们还是没有解决最开始的问题：首页内容如何呈现
的？这就涉及到render中的App了，如下图所示：

那么这个App对象怎么回事呢，我们打开App.vue,注意的
是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：

        template: 模板部分，主要是HTML代码，用来展示页面主
        体结构的
        script: js代码区域，主要是通过js代码来控制模板的数据来
        源和行为的
        style: css样式部分，主要通过css样式控制模板的页面效果
        得

接下来我们可以简化模板部分内容，添加script部分的数据模
型，删除css样式，完整代码

<template>
<div>
{{username}}
</div>
</template>
<script>
export default {
data() {
return {
username:"zhangsan"
}
},
methods: {
},
}
</script>
<style>
</style>

保存直接，回到浏览器，我们发现首页展示效果发生了变化，
如下图所示：

三.Vue组件库Element

3.1 Element介绍


不知道同学们还否记得我们之前讲解的前端开发模式MVVM，
我们之前学习的vue是侧重于VM开发的，主要用于数据绑定
到视图的，那么接下来我们学习的ElementUI就是一款侧重于
V开发的前端框架，主要用于开发美观的页面的。

 
Element：是饿了么公司前端开发团队提供的一套基于 Vue
的网站组件库，用于快速构建网页。

 
Element 提供了很多组件（组成网页的部件）供我们使用。例
如 超链接、按钮、图片、表格等等。如下图所示就是我们开
发的页面和ElementUI提供的效果对比：可以发现ElementUI
提供的各式各样好看的按钮


ElementUI的学习方式和我们之前的学习方式不太一样，对于
ElementUI，我们作为一个后台开发者，只需要学会如何从
ElementUI的官网拷贝组件到我们自己的页面中，并且做一
些修改即可。其官网地址：https://element.eleme.cn/#/zh-
CN，我们主要学习的是ElementUI中提供的常用组件，至于

其他组件同学们可以通过我们这几个组件的学习掌握到
ElementUI的学习技巧，然后课后自行学习。

3.2 快速入门

安装ElementUI组件库 （在当前工程的目录下），在命令行
执行指令：

具体操作如下图所示：

引入ElementUI组件库

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

具体操作如图所示：

然后我们需要按照vue项目的开发规范，在src/views目录下
创建一个vue组件文件，注意组件名称后缀是.vue，并且在组
件文件中编写之前介绍过的基本组件语法，代码如下：

<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

具体操作如图所示：

最后我们只需要去ElementUI的官网，找到组件库，然后找到
按钮组件，抄写代码即可，具体操作如下图所示：

然后找到按钮的代码，如下图所示：

紧接着我们复制组件代码到我们的vue组件文件中，操作如下
图所示：

最后，我们需要在默认访问的根组件src/App.vue中引入我们
自定义的组件，具体操作步骤如下：

然后App.vue组件中的具体代码如下，代码是我们通过上述步
骤引入element-view组件时自动生成的。

<template>
<div id="app">
<!-- {{message}} -->
<element-view></element-view>
</div>
</template>
<script>
import ElementView from
'./views/Element/ElementView.vue'
export default {
components: { ElementView },
data(){
return {
"message":"hello world"
}
}
}
</script>
<style>
</style>

然后运行我们的vue项目，浏览器直接访问之前的9000端口，
展示效果如下图所示：

到此，我们ElementUI的入门程序编写成功

3.3 Table表格

3.3.1 组件演示

Table 表格：用于展示多条结构类似的数据，可对数据进行排
序、筛选、对比或其他自定义操作。
首先我们需要来到ElementUI的组件库中，找到表格组件，如
下图所示：

然后复制代码到我们之前的ElementVue.vue组件中，需要注
意的是，我们组件包括了3个部分，如果官方有除了template
部分之外的style和script都需要复制。具体操作如下图所示：
template模板部分：

script脚本部分

script脚本部分

ElementView.vue组件文件整体代码如下：

<template>
<div>
<!-- Button按钮 -->
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<!-- Table表格 -->
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
<style>
</style>

此时回到浏览器，我们页面呈现如下效果：

3.3.2 组件属性详解

那么我们的ElementUI是如何将数据模型绑定到视图的呢？主
要通过如下几个属性：
        data: 主要定义table组件的数据模型
        prop: 定义列的数据应该绑定data中定义的具体的数据模
        型
        label: 定义列的标题
        width: 定义列的宽度
其具体示例含义如下图所示

PS:Element组件的所有属性都可以在组件页面的最下方找
到，如下图所示：

3.4 Pagination分页

3.4.1 组件演示

Pagination: 分页组件，主要提供分页工具条相关功能。其展
示效果图下图所示：

首先在官网找到分页组件，我们选择带背景色分页组件，如下
图所示：

然后复制代码到我们的ElementView.vue组件文件的
template中，拷贝如下代码

<el-pagination
background
layout="prev, pager, next"
:total="1000">
</el-pagination>

浏览器打开呈现如下效果：

3.4.2 组件属性详解

对于分页组件我们需要关注的是如下几个重要属性（可以通过
查阅官网组件中最下面的组件属性详细说明得到）：


        *background: 添加背景颜色，也就是上图蓝色背景色效
         果。
        *layout: 分页工具条的布局，其具体值包含 sizes , prev ,
         pager , next , jumper , -> , total , slot 这些值
        *total: 数据的总数量


然后根据官方分页组件提供的layout属性说明，如下图所示：


我们修改layout属性如下：


浏览器打开呈现如下效果：


layout="sizes,prev, pager, next,jumper,total"

3.4.3 组件事件详解
对于分页组件，除了上述几个属性，还有2个非常重要的事件
我们需要去学习：
       * size-change ： pageSize 改变时会触发
       * current-change ：currentPage 改变时会触发
其官方详细解释含义如下图所示：

对于这2个事件的参考代码，我们同样可以通过官方提供的完
整案例中找到，如下图所示：

然后我们找到对应的代码，首先复制事件，复制代码如下：

此时Panigation组件的template完整代码如下：

<!-- Pagination分页 -->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
layout="sizes,prev, pager,next,jumper,total"
:total="1000">
</el-pagination>

紧接着需要复制事件需要的2个函数，需要注意methods属性
和data同级，其代码如下：

methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},

此时Panigation组件的script部分完整代码如下：

<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>

回到浏览器中，我们f12打开开发者控制台，然后切换当前页
码和切换每页显示的数量，呈现如下效果：

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

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

相关文章

三、运算符、数据类型转换(显式、隐式)、语句(if、三元、switch、while、for)

三、运算符、数据类型转换(显式、隐式)、语句(if、三元、switch、while、for)

1. 运算符 1.1 自增自减 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> &…
阅读更多...
数据安全、信息安全、网络安全区别与联系

数据安全、信息安全、网络安全区别与联系

关键字&#xff1a; 信息安全 数据安全 网络安全 [导读] 在 “互联网 ” 被广泛提及的今天&#xff0c;安全问题也越来越多的受到人们关注&#xff0c;然而很多人对于 “信息安全”、“数据安全”、“网络安全” 的概念并不是很清楚。我们汇总了官方机构给这三者的定义&#…
阅读更多...
基于单片机的多功能视力保护器设计（论文+源码）

基于单片机的多功能视力保护器设计（论文+源码）

1. 功能设计 本次课题为多功能视力保护器&#xff0c;具体设计功能如下&#xff1a; (1)当使用者的眼睛距离写字台低于25cm时&#xff0c;报警灯闪烁以提醒使用者及时调整坐姿。 (2)学习环境光线自动检测&#xff1a;当光照强度低于1001X时&#xff0c;语音提醒使用者调整光…
阅读更多...
关于sass在Vue3中编写bem框架报错以及警告问题记录

关于sass在Vue3中编写bem框架报错以及警告问题记录

在编写完bem框架后 在vite.config.ts文件进行预编译处理时&#xff0c;报错的错误 1. 处理方式&#xff1a;使用新版api&#xff0c; 如图&#xff1a; 2. 处理方式&#xff1a;使用 use 替换掉 import&#xff0c; 如图&#xff1a; 3. 处理方式&#xff1a;使用路径别名&am…
阅读更多...
【 AI写作鹅-注册安全分析报告-无验证方式导致安全隐患】

【 AI写作鹅-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…
阅读更多...
什么是 eCPRI，它对 5G 和 Open RAN 有何贡献？

什么是 eCPRI，它对 5G 和 Open RAN 有何贡献？

这里写目录标题 eCPRI 协议平面&#xff1a;功能分解eCPRI与CPRI的区别CPRI具有以下特点&#xff1a;eCPRI具有以下特点&#xff1a;eCPRI 的优势 所需带宽减少 10 倍适用于 5G 和 Open RAN 的 eCPRI&#xff1a; 通用公共无线接口&#xff08;CPRI&#xff09;是一种行业合作&…
阅读更多...
《硬件架构的艺术》笔记（二）：时钟与复位

《硬件架构的艺术》笔记（二）：时钟与复位

本章主要针对ASIC设计给出建议&#xff0c;独立于CAD工具以及工艺&#xff0c;主要针对模块设计和存储器接口。 同步设计 这是对时钟域控制最安全的方法&#xff0c;单个主时钟和单个主置位/复位信号驱动设计中所有时序器件。 避免使用行波计数器 行波计数器&#xff1a;用触…
阅读更多...
使用@react-three/fiber,@mkkellogg/gaussian-splats-3d加载.splat，.ply，.ksplat文件

使用@react-three/fiber,@mkkellogg/gaussian-splats-3d加载.splat，.ply，.ksplat文件

前言 假设您正在现有项目中集成这些包&#xff0c;而该项目的构建工具为 Webpack 或 Vite。同时&#xff0c;您对 Three.js 和 React 有一定的了解。如果您发现有任何错误或有更好的方法&#xff0c;请随时留言。 安装 npm install three types/three react-three/fiber rea…
阅读更多...
「QT」几何数据类 之 QVector2D 二维向量类

「QT」几何数据类 之 QVector2D 二维向量类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid…
阅读更多...
NVIDIA RTX 系统上使用 llama.cpp 加速 LLM

NVIDIA RTX 系统上使用 llama.cpp 加速 LLM

NVIDIA RTX 系统上使用 llama.cpp 加速 LLM 文章目录 NVIDIA RTX 系统上使用 llama.cpp 加速 LLMllama.cpp 概述llama.cpp 在 NVIDIA RTX 上的加速性能使用 llama.cpp 构建的开发人员生态系统使用 llama.cpp 在 RTX 平台上加速的应用程序开始使用 适用于 Windows PC 的 NVIDIA …
阅读更多...
[CKS] K8S NetworkPolicy Set Up

[CKS] K8S NetworkPolicy Set Up

最近准备花一周的时间准备CKS考试&#xff0c;在准备考试中发现有一个题目关于不安全项目修复的题目。 ​ 专栏其他文章: [CKS] Create/Read/Mount a Secret in K8S-CSDN博客[CKS] Audit Log Policy-CSDN博客 -[CKS] 利用falco进行容器日志捕捉和安全监控-CSDN博客[CKS] K8S Ne…
阅读更多...
Odoo:免费开源的流程制造行业ERP管理系统

Odoo:免费开源的流程制造行业ERP管理系统

概述 聚焦流程制造连续性生产的特性&#xff0c;提供集成PLMERPMESBI的一体化解决方案&#xff0c;涵盖计划、生产、质量、配方、供销、库存、成本、设备、资金管理等业务领域的整体性解决方案 行业的最新洞察&行业典型痛点 一、生产过程需要精细化控制 需要在各种制约…
阅读更多...
MySQL技巧之跨服务器数据查询：基础篇-动态参数

MySQL技巧之跨服务器数据查询：基础篇-动态参数

MySQL技巧之跨服务器数据查询&#xff1a;基础篇-动态参数 上一篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MySQL数据库的连接名: MY_ODBC_MYSQL 以及用同样的方法&a…
阅读更多...
【Python爬虫实战】轻量级爬虫利器：DrissionPage之SessionPage与WebPage模块详解

【Python爬虫实战】轻量级爬虫利器：DrissionPage之SessionPage与WebPage模块详解

&#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、SessionPage &#xff08;一&#xff09;SessionPage 模块的基本功能 &#xff08;二&#xff09;基本使…
阅读更多...
vue3使用VueQuill插入自定义按钮

vue3使用VueQuill插入自定义按钮

在 Vue 3 项目中使用 VueQuill 编辑器时&#xff0c;我们可以自定义内容来满足特定的需求。本文将介绍如何在 VueQuill 中插入自定义内容&#xff0c;比如插入特定的标签或样式元素。 Quill官方中文文档 1. 项目设置和依赖安装 如果你还没有创建 Vue 3 项目&#xff0c;可以…
阅读更多...
OpenHamrony4.0去除锁屏是一种什么体验？触觉智能给你支支招

OpenHamrony4.0去除锁屏是一种什么体验？触觉智能给你支支招

本文介绍在开源鸿蒙OpenHarmony 4.0系统下&#xff0c;去除锁屏开机后直接进入界面的方法&#xff0c;触觉智能Purple Pi OH鸿蒙开发板演示&#xff0c;搭载了瑞芯微RK3566芯片&#xff0c;类树莓派设计&#xff0c;Laval官方社区主荐&#xff0c;已适配全新OpenHarmony5.0 Rel…
阅读更多...
【bat】自动生成指定层级文件夹

【bat】自动生成指定层级文件夹

&#x1f305; 一日之计在于晨&#xff0c;启航新程 ⭐ 本期特辑&#xff1a;自动生成指定层级文件夹 &#x1f3c6; 系列专题&#xff1a;BAT脚本工坊 文章目录 前言批处理脚本介绍脚本执行过程总结 前言 在日常的计算机使用过程中&#xff0c;我们经常需要创建文件夹来组织和…
阅读更多...
基于yolov5的番茄成熟度检测系统，支持图像、视频和摄像实时检测【pytorch框架、python源码】

基于yolov5的番茄成熟度检测系统，支持图像、视频和摄像实时检测【pytorch框架、python源码】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; yolov5 番茄成熟度检测系统&#xff0c;支持图像、视频和摄像实时检测【pytorch框架、python源码】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于 YOLOv5 的番茄成熟度检测系统是在 PyT…
阅读更多...
vue-echarts 动态x轴字段，可选多个公司数据，根据选择的条件动态生成echarts柱形图（或者折线图）

vue-echarts 动态x轴字段，可选多个公司数据，根据选择的条件动态生成echarts柱形图（或者折线图）

需求&#xff1a;月份、 公司 、显示字段、柱形图&#xff08;折线图&#xff09;&#xff0c;都为动态可选的。 &#xff08;此例子&#xff1a;模拟数据都为随机数&#xff0c;所以每次截图值都会不同&#xff09; &#xff08;Vue3 echarts 5.4.2版本&#xff09; <te…
阅读更多...
html的week控件 获取周(星期)的第一天(周一)和最后一天(周日)

html的week控件 获取周(星期)的第一天(周一)和最后一天(周日)

html的week控件 获取周(星期)的第一天(周一)和最后一天(周日) <input type"week" id"week" class"my-css" value"ViewBag.DefaultWeek" /><script> function PageList() { var dateStrin…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023