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-input
       placeholder="请输入内容"
         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-option
                   v-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>
相关推荐
customer0823 分钟前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙3 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
小远yyds3 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
程序媛小果3 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
小光学长3 小时前
基于vue框架的的流浪宠物救助系统25128(程序+源码+数据库+调试部署+开发环境)系统界面在最后面。
数据库·vue.js·宠物
guai_guai_guai4 小时前
uniapp
前端·javascript·vue.js·uni-app
王哲晓5 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js