Element-UI

目录

Layout 布局

按钮组件结合 el-icon 使用

单选框

复选框

日期组件

表格

分页

对话框

表单验证

---

        Element-UI是由饿了么前端团队开发的一套基于Vue.js的桌面端组件库，包含了多个常用的UI组件，如按钮、输入框、表格、弹窗等，可以快速地搭建一个现代化的Web应用程序。一个 Vue 3 UI 框架 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/

//注册Element-UI插件
import ElementUI from 'element-plus';
import 'element-plus/theme-chalk/index.css';
//注册Element Plus的图标组件
import * as ElIcons from '@element-plus/icons-vue'
const app = createApp(App);
for(const iconName in  ElIcons){
    app.component(iconName,ElIcons[iconName]);
}
//本地化语言为中文
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(router).use(ElementUI, {
    locale: zhCn,
}).mount("#app");

Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

 

    
        网格1
        网格2
        网格3
    
  

网格分栏中可以继续嵌套 

    
      网格1

      
        
          网格2.1
          网格2.2
        
      
    

按钮组件结合 el-icon 使用

   添加
   删除
   修改
   查询

单选框

      
        男
        女
        不限
      

复选框

lable相当于单选框的value属性，如果值为中文，注意把lable冒号去掉，或者用单引号引起来

下拉框

          //把值双向绑定到findObj对象的status属性上
          
            
          

 data() {
    return {
      findObj:{},
      cutObj:{},
      //value值和选项名
      options:['不限','未发货','发货中','已完结']
    }
  }

methods:{
    cutByItem(pageNO){
      this.findObj.pageNO=pageNO;
      //把带有status选项值的findObj对象 发送给后台
      axios.get("/project/order/cutByItem",{params:this.findObj}).then(resp=> {
        this.cutObj = resp.data;
      });
    }
}

日期组件

表格

prop 表示当前列对应的属性名

lable 表示表头的文本内容

scope.row 代表当前行对象

分页

current-page="pageNO"    当前页码
page-size="pageSize"   每页显示记录数
:total="count"   总记录数
@current-change="findByItem"  点击页码，触发的事件

它的页码是自动注入的，findByItem方法不需要传参可以直接获取到页码

对话框

添加
    
      对话框 正文
      

showAdd控制显示隐藏

表单验证

      
        
      
      
        
      
      
        
      
      
        Create
        Reset
      

ref="ruleFormRef"       表单唯一标识id
:model="studentObj"      模型对象
:rules="rules"        验证规则

Menu菜单

  
//这个组件会渲染在一个包含了4个栅格的列中
      
        
          
            
            
              新班管理
              班级信息
              班级物资
            
          
          
            
            
              新班管理
              学生信息
              学生统计
            
          
          
            
            
              基础组件
              表格
              表单
            
          
        
      
//用于渲染一个单独的视图组件，渲染在一个包含了20个栅格的列中
      
          
      
    

一键勾选默认值 

界面

   
      {{g.name}}
    
    {{selectGradeArray}}
    初始化

数据 

     selectGradeArray:[],
     array1:[{id:1,name:"添加用户"},{id:4,name:"查询用户"},{id:5,name:"报表查询"}],

函数 

init(){
      //this.selectGradeArray=this.gradeArray.map(n=>n.id)  全选
      this.selectGradeArray=this.array1.map(n=>n.id);
    },

利用Array.map()方法，将默认的权限数组中所有元素的id属性提取出来，将它们存储在selectGradeArray中。