当前位置: 首页 > news >正文

element UI学习使用(1)

https://element.eleme.cn/2.6/#/zh-CN/component/container vue模块库,可复制直接使用

1、搜索框、下拉搜索框

<el-form :inline="true"  class="demo-form-inline"><el-form-item label="结果搜索"><el-inputplaceholder="请输入内容"v-model="searchinput"><el-button @click="search_postman" slot="append" icon="el-icon-search"></el-button></el-input></el-form-item>&nbsp;&nbsp; &nbsp;&nbsp;<el-form-item label="选择语料"><el-select v-model="value" filterable placeholder="请选择语料"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-form><script>export default{name:"Export2Postman",data() {return {searchinput :'',options :[],value:'',}},methods: {search_postman(){}},}
</script>

2、单选

<template><el-radio-group v-model="radio2"><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 {radio2: 3};}}
</script>

3、多选

<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-button-group><el-button type="primary" icon="el-icon-edit"></el-button><el-button type="primary" icon="el-icon-share"></el-button><el-button type="primary" icon="el-icon-delete"></el-button>
</el-button-group>

5、超链接

<div><el-link href="https://element.eleme.io" target="_blank">默认链接</el-link><el-link type="primary">主要链接</el-link><el-link type="success">成功链接</el-link><el-link type="warning">警告链接</el-link><el-link type="danger">危险链接</el-link><el-link type="info">信息链接</el-link>
</div>

http://www.lryc.cn/news/437154.html

相关文章:

  • 如何搞定日语翻译?试试这四款工具
  • 【STM32】独立看门狗(IWDG)原理详解及编程实践(上)
  • 前端框架大观:探索现代Web开发的基石
  • 16 训练自己语言模型
  • udp网络通信 socket
  • LG AI研究开源EXAONE 3.0:一个7.8B双语语言模型,擅长英语和韩语,在实际应用和复杂推理中表现出色
  • 【mysql】mysql之主从部署以及介绍
  • Invoke-Maldaptive:一款针对LDAP SearchFilter的安全分析工具
  • QT 读取Excel表
  • 深入理解 Vue 组件样式管理:Scoped、Deep 和 !important 的使用20240909
  • C语言内存函数(21)
  • 三高基本概念之-并发和并行
  • 宝塔面板FTP连接时“服务器发回了不可路由的地址。使用服务器地址代替。”
  • 面试的一些小小经验
  • IV转换放大器原理图及PCB设计分析
  • 【数学建模经验贴】一个研赛数模老手的经验
  • vivo手机已删除的短信还能恢复吗?
  • [网络][CISCO]CISCO IOS升级
  • 通过python提取PDF文件指定页的图片
  • Leetcode Hot 100刷题记录 -Day12(轮转数组)
  • GitHub每日最火火火项目(9.13)
  • 力扣--649.Dota2参议院
  • vim 安装与配置教程(详细教程)
  • 【WPF】Popup的使用
  • 力扣刷题之2576.求出最多标记下标
  • 黑马JavaWeb开发笔记16——请求(postman、简单参数、实体参数、@RequestParam映射)
  • Corrupt block relative dba: 0x02c0b382 (file 11, block 45954)
  • 二叉排序树在实际生活应用中作用
  • 单例模式的学习
  • 54 mysql 中各种 timeout - connect/wait/interactive/read/write_timeout