当前位置: 首页 > 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><!-- `checked` 为 true 或 false --><el-checkbox v-model="checked">备选项</el-checkbox>
</template>
<script>export default {data() {return {checked: true};}};
</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>

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Html、Css3动画效果
  • 1 MATLAB 绘图函数函数: plot
  • kvm 虚拟机命令行虚拟机操作、制作快照和恢复快照以及工作常用总结
  • 【Python爬虫】利用爬虫抓取双色球开奖号码,获取完整数据并通过随机森林和多层感知两种模型进行简单的预测
  • redis基本数据类型和常见命令
  • 工具使用记录-Tkinter
  • Leetcode 无重复字符的最长子串
  • slf4j依赖冲突处理
  • torchvision.transforms.ToPILImage()使用
  • MySQL 故障排查与性能优化指南
  • 韶音开放式耳机好用吗?南卡、韶音、Oladance、Cleer热门开放式耳机一周横评
  • 【Gateway】网关服务快速上手
  • uniapp数据缓存和发起网络请求
  • Unity Apple Vision Pro 开发(五):PolySpatial 2.0 导入方式
  • flink中slotSharingGroup() 的详解
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • mockjs让前端开发独立于后端
  • MySQL主从复制读写分离及奇怪的问题
  • STAR法则
  • 给自己的博客网站加上酷炫的初音未来音乐游戏?
  • 基于Dubbo+ZooKeeper的分布式服务的实现
  • 批量截取pdf文件
  • 让你的分享飞起来——极光推出社会化分享组件
  • Hibernate主键生成策略及选择
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • !!java web学习笔记(一到五)
  • # 计算机视觉入门
  • ${factoryList }后面有空格不影响
  • (1)(1.13) SiK无线电高级配置(六)
  • (C++二叉树05) 合并二叉树 二叉搜索树中的搜索 验证二叉搜索树
  • (Redis使用系列) Springboot 使用redis的List数据结构实现简单的排队功能场景 九
  • (二)延时任务篇——通过redis的key监听,实现延迟任务实战
  • (附源码)ssm本科教学合格评估管理系统 毕业设计 180916
  • (附源码)ssm高校实验室 毕业设计 800008
  • (每日持续更新)jdk api之StringBufferInputStream基础、应用、实战
  • (四)linux文件内容查看
  • (学习日记)2024.02.29:UCOSIII第二节
  • (一)SpringBoot3---尚硅谷总结
  • ***原理与防范
  • .NET Core 和 .NET Framework 中的 MEF2
  • .net core 控制台应用程序读取配置文件app.config
  • .NET Core中的去虚
  • .net dataexcel 脚本公式 函数源码
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET成年了,然后呢?
  • @Autowired多个相同类型bean装配问题
  • @NestedConfigurationProperty 注解用法
  • @德人合科技——天锐绿盾 | 图纸加密软件有哪些功能呢?
  • [ C++ ] STL---string类的模拟实现
  • [2018/11/18] Java数据结构(2) 简单排序 冒泡排序 选择排序 插入排序
  • [ai笔记3] ai春晚观后感-谈谈ai与艺术
  • [Algorithm][动态规划][两个数组的DP][正则表达式匹配][交错字符串][两个字符串的最小ASCII删除和][最长重复子数组]详细讲解
  • [C/C++]数据结构 深入挖掘环形链表问题
  • [C++] cout、wcout无法正常输出中文字符问题的深入调查(1):各种编译器测试
  • [CareerCup] 12.3 Test Move Method in a Chess Game 测试象棋游戏中的移动方法