【Vue】Element |
您所在的位置：网站首页 › vue添加dom节点 › 【Vue】Element |
【Vue】Element
|
目录 Element-UI学习 了解vue开发中一些常用的布局组件库 项目导入element-ui 表单组件el-table 表单组件el-table基本使用 el-table组件插槽实现自定义列 el-table组件作用域插槽使用 分页组件el-pagination 表单组件el-form el-form组件基本使用 el-form组件表单校验 1.在data()中定义校验规则 2.在模板上配置对应规则（三个配置) 3.处理最终校验结果 自定义校验规则 重置表单清理校验痕迹 树形组件el-tree el-tree基本使用 el-tree自定义菜单属性(了解即可) 其他组件 下拉菜单el-select 对话框组件Dialog 弹框message-box Element-UI学习 了解vue开发中一些常用的布局组件库1.移动端（Vant, Cube-UI, NutUI ） 2.PC端 （ element-ui, Ant Design of Vue, iView） 3.微信小程序： uniapp 布局组件库使用流程一般分为以下几个步骤 1.进官网，查文档 2.根据官网流程，先下载后导包，然后CV 3.遇到问题了如何解决呢？ （1）百度搜索你遇到的问题 （2）去github的issue,面对面与组件作者本人提出问题 ： Issues · ElemeFE/element · GitHub 项目导入element-ui1.下载element-ui : npm i element-ui -S-S: 是--save的简写，表示 这个包是生产依赖， 表示项目上线也要使用这个包。 -S: 是可以省略不写的。 如果要安装开发依赖，则要加 -D。 2.main.js中导入element-ui import Vue from 'vue' import App from './App.vue'Vue.config.productionTip = false//完整引入 ElementUI //(1)导包 import ElementUI from 'element-ui' //(2)导入css样式 import 'element-ui/lib/theme-chalk/index.css' //(3)注册所有组件 Vue.use(ElementUI)new Vue({render: h => h(App), }).$mount('#app') el-button按钮type : 设置颜色 plain : 朴素按钮（只有边框颜色，背景色浅灰） round : 圆角按钮 circle : 圆形按钮 icon : 字体图标按钮 默认按钮主要按钮成功按钮信息按钮警告按钮危险按钮 表单组件el-table
表单组件el-table基本使用
🏆行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。 🏆列，决定表格结构。 列由el-table-column决定，下面有三个属性需要掌握 💎label：决定当前列显示出的标题 (相当于表头) 💎prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名。prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。 💎width: 用来设置列的宽度。如果不设置，它会自适应。 删除 el-table组件插槽实现自定义列1.插槽作用：父组件传递html结构给子组件 2.table插槽应用：可以让我们自定义表格的列 删除 el-table组件作用域插槽使用1.插槽作用：父组件传递html结构给子组件 2.table插槽应用：可以让我们自定义表格的列 3.table作用域插槽作用： 让 父组件获取当前子组件 内部数据 删除 分页组件el-pagination🏆:layout : 设置页码布局（通过关键词排序可以控制页码布局顺序） - prev:上一页 - pager:页码 - next:下一页 🏆:total : 设置数据的总数 🏆:page-size: 设置一页有多少数据 - 一般页码会和table组合使用 - 作用 - 分页逻辑：总页数 = 总条数（:total） / 每页的条数(:page-size) 🏆:pager-count : 设置页码按钮数量 - `注意点`:范围7-21之间的奇数，如果是偶数则会报错 🏆@current-change : 页码改变事件 - 这个事件有一个默认形参，就是当前改变的页码 Pagination
表单组件el-form el-form组件基本使用 1.表单中的数据项一般会用一个对象包起来 2.属性名一般和后端接口中保持一致 3.在元素上采用v-model双向绑定 4.绑定事件，通过双向绑定获取表单输入值 登录取消 export default {data() {return {form: {mobile: "",password: ""}}},methods: {doLogin() {},//点击确认 : 获取表单树submitForm() {console.log(this.form)},} } el-form组件表单校验表单校验分为三个步骤 1.在data()中定义校验规则 2.在模板上配置对应规则（三个配置） 给表单设置 rules 属性传入验证规则 给表单设置model属性传入表单数据 给表单项（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名 3.处理最终校验结果（是否每一个表单全部校验通过） 1.在data()中定义校验规则格式 data() {return {rules: {// 字段名1：表示要验证的属性// 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。// 数组中的多条规则会按顺序进行字段名1: [{ 验证规则1 },{ 验证规则2 },],字段名2: [{ 验证规则1 },{ 验证规则2 },], }} } data () {return {// 表单验证规则，整体是一个对象// 键：要验证的字段, 值：是一个数组，每一项就是一条规则rules: {mobile: [{ required: true, message: "请输入手机号", trigger: "blur" },{pattern: /^\d{11}$/,message: "请输入合法的验证码",trigger: "blur"}],password: [{ required: true, message: "请输入手机号", trigger: "blur" },{pattern: /^\w{6,15}$/,message: "请输入合法的密码",trigger: "blur"},]}}},注意:rules中的属性名与表单数据项中的属性名必须是一致的。 2.在模板上配置对应规则（三个配置)给 el-form 组件绑定 model 为表单数据对象 给 el-form 组件绑定 rules 属性配置验证规则 给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称 注意点 位置不要写错了 model和rules和ref是写在 el-form组件上的 prop是写在el-form-item组件上的 单词不要写错（以下三个位置单词需要一致） v-model绑定的属性 rules的属性 prop的属性 登录取消 3.处理最终校验结果给el-form组件添加ref属性用于获取该组件(获取DOM) 语法： validate 方法是表单组件自带的，用来对表单内容进行检验。 需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证 element-ui的表单组件.validate(valid => {if(valid) {// 通过了验证} else {// 验证失败} }) methods: {doLogin() {console.log(this.form)alert("登录成功")},//点击确认 : 获取表单树submitForm() {this.$refs.myform.validate(valid => {// valid 就是表单验证的结果，如果是true，表示通过了console.log(valid)if (valid) {// 通过了验证，你可以做后续动作了this.doLogin()}})}, } 自定义校验规则例如： 密码不能是123456 语法：在rules中自定义validator rules:{属性名1: [{ // 注意参数顺序validator: function (rule, value, callback) {// rule：采用的规则// value: 被校验的值// callback是回调函数， // 如果通过了规则检验，就直接调用callback()// 如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)// 例如：callback(new Error('错误说明'))}, trigger: 'blur' }] } //正则校验rules: {mobile: [{ required: true, message: "请输入手机号", trigger: "blur" },{pattern: /^\d{11}$/,message: "请输入合法的验证码",trigger: "blur"}],password: [{ required: true, message: "请输入手机号", trigger: "blur" },{pattern: /^\w{6,15}$/,message: "请输入合法的密码",trigger: "blur"},{validator: (rule, value, callback) => {console.log(rule, value, callback)if (value === "123456") {callback(new Error("密码不能是123456哟"))} else {callback()}},triggle: "blur"}]} 重置表单清理校验痕迹需求：校验失败会有红色的提示文字，有时候我们需要在执行了某个操作之后把当前校校验失败留下的痕迹清理一下，为下一次校验做准备。 语法 this.$refs.form组件的引用.resetFields()清理校验痕迹 恢复表单默认数据 取消 //点击取消 resetForm(formName) {//this.$refs[formName].resetFields() } 树形组件el-tree什么是树形结构 ： 多级菜单 这是PC端布局里面一个比较复杂的结构 1. 1.1 1.2 2 2.1 2.2 el-tree基本使用1.树形结构组件比较简单，就只有一个el-tree,难点是里面的数据data 2.数据项中label和children是关键字，不可随意改动。tree组件用它们来显示内容 小提问：学习递归函数的时候，有没有了解过这种特殊的数据结构呢？ label : 用于展示菜单的本文 chilren : 数组，里面放子菜单 3.el-tree的@node-click用于给组件绑定点击事件 // 共三个参数， // 依次为： // - 传递给 data 属性的数组中该节点所对应的对象 // - 节点对应的 Node // - 节点组件本身 handleNodeClick(a, b, c) {console.log(a, b, c) } export default {data() {return {data: [{label: "一级 1",children: [{label: "二级 1-1",children: [{label: "三级 1-1-1"}]}]},{label: "一级 2",children: [{label: "二级 2-1",children: [{label: "三级 2-1-1"}]},{label: "二级 2-2",children: [{label: "三级 2-2-1"}]}]},{label: "一级 3",children: [{label: "二级 3-1",children: [{label: "三级 3-1-1"}]},{label: "二级 3-2",children: [{label: "三级 3-2-1"}]}]}]}},methods: {// 共三个参数，// 依次为：// - 传递给 data 属性的数组中该节点所对应的对象// - 节点对应的 Node// - 节点组件本身handleNodeClick(a, b, c) {console.log(a, b, c)}} } el-tree自定义菜单属性(了解即可)tree组件渲染节点title默认使用的是数据中的label属性 识别子节点默认使用的是children属性，我们尝试把data里的属性名换一下 例如：label换成name，children换成childList，就会发现渲染失败了。 如果你非要去自定义这个两个关键字：label和children的话，就需要用到props属性了。 defaultProps是data()中声明的一个对象，我们通过props传递给el-tree告诉它，label和children用我们自定义的属性 defaultProps:{label:'name',children:'childList' } 其他组件 下拉菜单el-select 下拉选择框 export default {data() {return {options: [{value: "1",label: "黄金糕"},{value: "2",label: "双皮奶"},{value: "选项3",label: "蚵仔煎"},{value: "选项4",label: "龙须面"},{value: "选项5",label: "北京烤鸭"}],value: ""}} } 对话框组件Dialog1.使用默认插槽来自定义内容 2.通过给el-dialog组件添加:visible.sync="dialogVisible"来控制显示隐藏 dialogVisible是data中的一个布尔类型属性 弹框组件有俩种状态，一个是打开一个是关闭，如果我们想在它打开或者关闭时做一些自己的事情，就可以监听俩个事件 @close 弹框关闭 : dialogVisible从true变成false @open 弹框打开 : dialogVisible从false变成true html结构 点击打开 Dialog 这是一段信息取 消确 定data数据 export default {data() {return {//对话框数据dialogVisible: false, }},methods: {dialogClose() {console.log('弹框要关闭了')},dialogOpen(){console.log('弹框打开咯')}} } 弹框message-box 提示框 弹框 //提示框 openMessage() {this.$message({type: "success ",message: `月薪15K`}) }, //弹框 open() {this.$alert("你真的要走吗？", "系统提示", {confirmButtonText: "确认",callback: action => {this.$message({type: "info",message: `action: ${action}`})}}) } |
【本文地址】
今日新闻 |
推荐新闻 |