前端开发——ElementUI组件的使用

文章目录

  • 1. Tabs标签页
  • 2. 单选框 el-radio
  • 3. 复选框 el-checkbox
  • 4. 下拉框 el-select
  • 5. 表格 el-table
  • 6. 对话框 el-dialog
  • 7. 文字提示 el-tooltip
  • 8. 抽屉 el-drawer

1. Tabs标签页

<template><el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane><el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane><el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane><el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane></el-tabs>
</template>
<script>export default {data() {return {activeName: 'first'};},methods: {handleClick(tab, event) {console.log(tab, event);}}};
</script>

v-model="activeName"

  • 具体来说,v-model 指令将 <el-tabs> 组件的当前激活状态(即当前显示的 <el-tab-pane>)与 Vue 实例中的一个数据属性(在这个例子中是 activeName)进行了绑定。
  • 用户通过点击或其他交互方式改变 <el-tabs> 的激活状态时,activeName 的值会自动更新为相应标签页的 name 属性值。
  • 反过来,如果 Vue 实例中的 activeName 数据属性的值通过某种方式(如方法调用或计算属性更新)发生了变化,<el-tabs> 组件的激活状态也会相应地更新,以显示与新的 activeName* 值对应的标签页。

2. 单选框 el-radio

<template><el-radio-group v-model="radio"><el-radio :label="3">备选项</el-radio><el-radio :label="6">备选项</el-radio><el-radio :label="9">备选项</el-radio></el-radio-group>
</template><script>export default {data () {return {radio: 3};}}
</script>

v-model="radio"

当用户点击其中一个**<el-radio>** 按钮时,v-model 会确保 radio 数据属性的值更新为所选按钮的 label 值。如果用户选择了 label 为 ‘2’ 的按钮,radio 的值将变为 ‘2’,反之亦然。这种双向绑定确保了 Vue 实例的数据和 DOM 状态始终保持同步。

3. 复选框 el-checkbox

<template><el-checkbox-group v-model="checkList"><el-checkbox label="复选框 A"></el-checkbox><el-checkbox label="复选框 B"></el-checkbox><el-checkbox label="复选框 C"></el-checkbox><el-checkbox label="禁用" disabled></el-checkbox><el-checkbox label="选中且禁用" disabled></el-checkbox></el-checkbox-group>
</template><script>export default {data () {return {checkList: ['选中且禁用','复选框 A']};}};
</script>

4. 下拉框 el-select

<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''}}}
</script>

v-model="value"

当用户从下拉选择框中选择一个选项时,data 的值将更新为所选项的 value。同样地,如果你在 Vue 实例中改变 data 的值,下拉选择框的选中项也会相应地更新。

5. 表格 el-table

在这里插入图片描述

<template><el-table:data="tableData"borderstyle="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</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>

6. 对话框 el-dialog

在这里插入图片描述

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
</el-dialog><script>export default {data() {return {dialogVisible: false};},methods: {handleClose(done) {this.$confirm('确认关闭?').then(_ => {done();}).catch(_ => {});}}};
</script>

7. 文字提示 el-tooltip

在这里插入图片描述

<el-tooltip placement="top"><div slot="content">提示信息</div><el-button>Top center</el-button>
</el-tooltip>

8. 抽屉 el-drawer

在这里插入图片描述

<el-button type="text" @click="table = true">打开嵌套表格的 Drawer</el-button>
<el-button type="text" @click="dialog = true">打开嵌套 Form 的 Drawer</el-button>
<el-drawertitle="我嵌套了表格!":visible.sync="table"direction="rtl"size="50%"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table>
</el-drawer><el-drawertitle="我嵌套了 Form !":before-close="handleClose":visible.sync="dialog"direction="ltr"custom-class="demo-drawer"ref="drawer"><div class="demo-drawer__content"><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div class="demo-drawer__footer"><el-button @click="cancelForm">取 消</el-button><el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button></div></div>
</el-drawer><script>
export default {data() {return {table: false,dialog: false,loading: false,gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},formLabelWidth: '80px',timer: null,};},methods: {handleClose(done) {if (this.loading) {return;}this.$confirm('确定要提交表单吗?').then(_ => {this.loading = true;this.timer = setTimeout(() => {done();// 动画关闭需要一定的时间setTimeout(() => {this.loading = false;}, 400);}, 2000);}).catch(_ => {});},cancelForm() {this.loading = false;this.dialog = false;clearTimeout(this.timer);}}
}
</script>

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

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

相关文章

如何实现WordPress后台显示文章、分类目录、标签等的ID?

我们平时在使用WordPress的过程中&#xff0c;偶尔需要用到文章的ID&#xff0c;或分类目录ID&#xff0c;或标签ID&#xff0c;或媒体库ID&#xff0c;或评论ID&#xff0c;或用户ID等&#xff0c;但是WordPress后台默认是不显示它们的ID的。 今天boke112百科就跟大家分享如何…

聚观早报 | 爱奇艺2023年Q4财报;苹果将加大AI投入

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 3月1日消息 爱奇艺2023年Q4财报 苹果将加大AI投入 意大利正与多家车企谈判 多家企业与百度达成合作 比亚迪宋PL…

SDR架构 (一)为什么基带有I和Q路?

我之前做过自己的RTL-SDR。一直有一个疑惑。为啥rtl2832u芯片有一对差分I路&#xff0c;还有一对差分Q路。差分很好理解是为了抗干扰&#xff0c;但为啥要I和Q呢&#xff1f;并且我也知道不少人在自己修改的时候&#xff0c;保留I路对接在r820t2&#xff08;跟原版一样&#xf…

逆变器专题(12)-弱电网

相应仿真原件请移步资源下载 通常情况下&#xff0c;理想电网都为强电网&#xff0c;但随着光伏并网系统的大力发展&#xff0c;分布式光伏也越发鼎盛&#xff0c;越来越多的电力电子设备接入大电网、并且考虑能源利用问题&#xff0c;大部分光伏电站都建在戈壁沙漠等地区&…

多行业万能预约门店小程序源码系统 支持多门店预约小程序 带完整的安装代码包以及搭建教程

随着消费者对于服务体验要求的不断提升&#xff0c;门店预约系统成为了许多行业提升服务质量、提高运营效率的重要工具。然而&#xff0c;市面上的预约系统往往功能单一&#xff0c;无法满足多行业、多场景的个性化需求。下面&#xff0c;小编集合了多年的行业经验和技术积累&a…

岩土工程中的振弦采集仪技术发展与前景展望

岩土工程中的振弦采集仪技术发展与前景展望 河北稳控科技振弦采集仪是一种常用的岩土工程监测仪器&#xff0c;用于测量土壤或岩石的振动特性。随着岩土工程领域的发展和技术的进步&#xff0c;振弦采集仪技术也得到了不断的发展和改进。以下是对振弦采集仪技术发展与前景的展…

css5定位

css 一.定位1.概念&#xff08;定位定位模式边位移&#xff09;2.静态位移static&#xff08;不常用&#xff09;3.相对定位relative&#xff08;不脱标&#xff09;&#xff08;占位置&#xff09;4.绝对定位absolute&#xff08;脱标&#xff09;&#xff08;不占位置&#x…

VScode 单步断点调试Nodejs方法总结

目录 方法一 方法二 方法三 方法一 使用vscode开发nodejs程序,能够启动单步调试模式,在指定代码处添加断点,像chrome、firefox浏览器上一样进行JavaScript的调试。 新建一个nodejs的工程,编写代码后,配置代码调试的步骤: 1、切换到代码调试界面 2、界面提示,新建一…

基于springboot实现在线考试系统项目【项目源码+论文说明】

基于springboot实现在线考试系统演示 摘要 时代在变化&#xff0c;科技技术以无法预测的速度在达到新的高度&#xff0c;并且被应用于社会生活的各个领域&#xff0c;随着生活的加快&#xff0c;也使很多潜在的点逐渐突显出来&#xff0c;社会对于人才的要总是非常迫切的&…

IDEA-DeBug理论与实践

文章目录 01_Debug简介和意义02_IDEA中的Debug步骤03_跳转到当前代码执行的行04_步过调试的使用05_步入调试的使用06_强制步入调试的使用07_步出调试的使用08_回退断点调试的使用09_运行到光标处10_计算表达式11_条件断点12_多线程调试 在软件开发中&#xff0c;IDEA&#xff0…

THINKPHP 跨域报错解决方案

报错&#xff1a;has been blocked by CORS policy: Response to preflight request doesnt pass access control check: No Access-Control-Allow-Origin header is present on the requested resource. 环境&#xff1a;thinkphp6 nginx 今天和VUE配合调用接口的时候发现跨…

果园预售系统|基于Springboot的果园预售系统设计与实现(源码+数据库+文档)

果园预售系统目录 目录 基于Springboot的果园预售系统设计与实现 一、前言 二、系统功能设计 三、系统功能设计 1 、果园管理 2、水果管理 3、果树管理 4、公告管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获…

常见的4种Bug 出现原因和解决方案

某项目定期进行线上Bug分析大会&#xff0c;主要针对近期出现的Bug和事故进行分析其出现的原因。经过一段时间的数据分析和汇总&#xff0c;找到了在开发过程中&#xff0c;较为常见的Bug以及其出现的原因。 通过分析原因&#xff0c;进一步找到解决方案&#xff0c;从而有利于…

2024.02.29作业

1. TCP模型 server #include "test.h"#define SER_IP "192.168.191.128" #define SER_PORT 9999int main(int argc, char const *argv[]) {int sfd -1;sfd socket(AF_INET, SOCK_STREAM, 0);if (-1 sfd){perror("socket error");return -1;…

算法沉淀——动态规划之两个数组的 dp(上)(leetcode真题剖析)

算法沉淀——动态规划之两个数组的 dp 01.最长公共子序列02.不相交的线03.不同的子序列04.通配符匹配 01.最长公共子序列 题目链接&#xff1a;https://leetcode.cn/problems/longest-common-subsequence/ 给定两个字符串 text1 和 text2&#xff0c;返回这两个字符串的最长 …

0201sherlock(福尔摩斯)-通过名称寻找媒体账号(地址)-github-开源项目学习

文章目录 一 项目简介二 项目安装和演示1 安装2 演示 三 源码分析1 项目结构2 主程序源代码分析 四 添加自定义网址结语 一 项目简介 二 项目安装和演示 1 安装 # clone the repo $ git clone https://github.com/sherlock-project/sherlock.git# change the working direct…

opencv--使用直方图找谷底进行确定分割阈值

直方图原理就不说了&#xff0c;大家自行百度 直方图可以帮助分析图像中的灰度变化&#xff0c;进而帮助确定最优二值化的灰度阈值&#xff08;threshold level&#xff09;。如果物体与背景的灰度值对比明显&#xff0c;此时灰度直方图就会包含双峰&#xff08;bimodal histo…

Python web框架fastapi数据库操作ORM(一)

文章目录 Fastapi ORM操作1、创建模型2、创建数据库连接配置文件3、启动项目4、根据模型类创建数据库表1. 初始化配置&#xff0c;只需要使用一次2. 初始化数据库&#xff0c;一般情况下只用一次3. 更新模型并进行迁移4. 重新执行迁移&#xff0c;写入数据库5. 回到上一个版本6…

Oracle 11g升级19c 后部分查询功能很慢

*Oracle 11g升级19c 后部分查询功能很慢 今天生产突然有个查询非常慢&#xff0c;日志显示执行了50秒左右&#xff0c;但是从日志中拿出SQL在PLSQL执行&#xff0c;发现用时不到1秒&#xff0c;查看SQL,怀疑是下面几种原因导致 1、使用函数不当 UNIT.UNIT_CODE LIKE CONCAT(‘…

状态码转文字!!!(表格数字转文字)

1、应用场景&#xff1a;在我们的数据库表中经常会有status这个字段&#xff0c;这个字段经常表示此类商品的状态&#xff0c;例如&#xff1a;0->删除&#xff0c;1->上架&#xff0c;0->下架&#xff0c;等等。 2、我们返回给前端数据时&#xff0c;如果在页面显示0…