皮皮网

1.vue elementui 表单验证async-validator的使用
2.元素的赋存形式
3.动态实现elementui不同用户el-form中的输入框el-input校验项不同
4.elementUI form表单中 label 和 content 水平对齐并居中

vue elementui 表单验证async-validator的使用

       引入表单组件

       elementUI的表单组件，form 组件，使用输入框、选择器、单选框、多选框等控件组成，爱客源码解密用以收集、校验、提交数据。这个组件同时提供了对控件输入内容的校验功能。

       整体表单区域，使用el-form 来包裹，每一行的输入组件，使用el-form-item 组件：

       el-form的外滩源码头英文几个属性，model是表单数据对象，每一项提价的数据，都放在这个对象里。然后注册ref特征。

       引入校验

       首先在整体表单中，声明校验规则对象

       然后，将校验规则，引入到具体表单项：

       在el-form-item中，增加prop属性，值为校验的字段值。该值属于表单域下（el-form绑定的数据对象下），在本例子中，el-form-item中的创意编程源码画板prop设为name，实际数据指的就是form.name。

       最后针对每一项表单项中，需要校验的字段，制定校验规则：

       这样，在表单中，姓名输入框，就设置为必须输入，且输入的要求是长度3-5个字符。

       rules 中的关键字说明

       type 字段

       string: Must be of type string. This is the default type.

       number: Must be of type number.

       boolean: Must be of type boolean.

       method: Must be of type function.

       regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.

       integer: Must be of type number and an integer.

       float: Must be of type number and a floating point number.

       array: Must be an array as determined by Array.isArray.

       object: Must be of type object and not Array.isArray.

       enum: Value must exist in the enum.

       date: Value must be valid as determined by Date

       url: Must be of type url.

       hex: Must be of type hex.

       email: Must be of type email.

       any: Can be any type.

       message

       错误时，提示的文字

       trigger

       触发的时机

       pattern

       使用正则进行校验

       range

       限定字符串和数组的长度，使用min 和max字段。

       也可以使用len字段，来校验长度。哪里可以看到源码

       判断校验结果：validate 方法

       在添加了校验后，在合适的时机，会出发校验（例如失焦、内容改变的时候）。如果校验不通过，需要阻断向下的行为。在elementUI 中，提供了 validate 方法，来查询整个表单的校验结果（使用该方法时，需要通过持有的ref，来调用）。

       validate : 对整个表单进行校验的方法，参数为一个回调函数。在线记帐本源码该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise。

       完整的例子

元素的赋存形式

       å…ƒç´ çš„赋存形式（element form）是指元素在一定的自然过程或其演化历史中的某个阶段所处的状态及与共生元素间的结合关系。元素的赋存形式的含义应包括元素的赋存状态和元素的存在形式。自然界元素有三态，即气态、液态和固态。本节主要介绍元素为固态（固相中）和液态（流体相中）时的存在形式。

       2.6.2.1 元素在固相中的存在形式

       å…ƒç´ åœ¨å›ºç›¸ä¸­çš„存在形式基本能反映固相形成时的物理化学环境。因此研究元素的存在形式可以作为判断已发生过的地球化学作用的条件、元素迁移-演化历史特征的依据。

       å…ƒç´ çš„赋存形式主要有：

       ï¼ˆ1）独立矿物——能用肉眼或能在显微镜下进行研究的矿物，粒径大于0. mm。

       ï¼ˆ2）类质同象——或称为结构混入物，指不同的元素或质点占据相同的晶格结点位置、而晶格类型和晶格常数不发生明显变化的现象。微量元素进入主元素的晶格后，如不通过破坏矿物晶格的手段，采用机械和化学的方法都不能使两者分离。

       ï¼ˆ3）超显微非结构混入物（或称为超显微包裹体）——被包裹在其他矿物中，粒径小于0. mm的物质。由于它不占据主矿物的晶格位置，因此是独立矿物，但又不形成可以进行矿物学研究的颗粒。如在岩浆岩中的Au、Ag、Pb、Bi、Hg等，常可以呈超细硫化物存在于其他矿物中。

       ï¼ˆ4）吸附——胶体、晶体表面或解理面上由于电荷不平衡而吸附异性离子的现象。是一种结合力较弱、易被交换和分离的存在形式（活性赋存形式）。

       ï¼ˆ5）与有机质结合——元素加入到有机物中，如血液中的Fe、骨骼中的Ca和脑细胞中的P都完全进入到有机质中。此外，微量元素常与有机物结合形成金属有机化合物或金属有机络合物，如铜乙二胺配离子（［Cu（CH）2ï¼½2+）。

       åŒç§å…ƒç´ åœ¨åŒä¸€ç±»åœ°è´¨ä½“中可以有多种存在形式，如Nb等微量元素在花岗岩中主要以类质同象形式存在，但当其含量较高时也可以与Nb的独立矿物共存。又如Pb在热液矿脉中主要以方铅矿和铅硫盐形式存在，部分Pb也可以以类质同象形式进入了其他硫化物矿物中。

       åŒæ ·ï¼Œå…ƒç´ çš„存在形式不是一成不变的，以 Pb为例：在岩浆熔体中呈简单离子 Pb2+或 PbS 分子；在岩浆结晶时主要以类质同象方式进入钾长石，少量呈微细 PbS分子；在热液作用过程与 Cl-、F-、HS-等结合成配离子；在热液脉中形成方铅矿和铅硫盐，部分类质同象进入其他硫化物矿物中；在地表风化后转变成白铅矿；在还原的沉积盆地中又可以生成方铅矿。

       å…ƒç´ èµ‹å­˜å½¢å¼çš„研究方法（表2.）主要有：

       ï¼ˆ1）元素含量测定：通过矿物含量测定发现混入元素，并判断其类质同象的可能性。

       ï¼ˆ2）显微镜法：镜下观测是否有微细矿物颗粒。

       ï¼ˆ3）萃取法（偏提取法）：选用一种只能溶解被研究元素的某种存在形式的溶剂，如经常用碘甲烷提取黑云母中吸附态的Sn。偏提取物相分析方法分为两大类：顺序提取和平行提取法。顺序提取只用一分试样，利用分解萃取能力不同的化学试剂，先提取结合力最弱部分，而其他部分保留于残渣中；分离后，再换一种试剂提取次弱结合部分，如此一直到提取出结合力最强的部分。平行提取时将样品分成多个试样，用多种萃取能力不同的化学试剂同时进行萃取，根据它们的差值来计算各种形式的分量。

       ï¼ˆ4）晶格常数测定：通过X光衍射法测定矿物的晶格常数，据晶格常数的变化来判断类质同象的类型和程度。如对闪锌矿d值的测定可以确定其中Fe2+类质同象混入量的多少，又如通过硫化物晶格常数的变化来估计其中可能的含金量。

       ï¼ˆ5）电子显微镜扫描：一方面可以研究细小颗粒矿物的成分、结构和光学性质等；另一方面可以通过对矿物中微量元素的分布特征（面扫描、线扫描或背散射图像，呈类质同象的元素在矿物中的分布应该是均匀的），来研究矿物的化学键性和离子电价。

       è¡¨2. 元素存在形式的常用研究方法

       è‹¥å…ƒç´ çš„结合形式不同，将具有不同的化学活动性。例如，不论是常量元素或微量元素，若是存在于矿物的晶格中，相对是比较稳定的，基本上不受外界环境和化学条件的影响，例如不会因环境酸碱度的改变而从矿物中析出。但是，如果元素不是存在于矿物中，而是以被粘土矿物吸附的形式存在，当环境变为酸性时，H+离子将和重金属离子争夺粘土矿物表面的可交换位置，结果使被吸附在粘土矿物表面的部分重金属离子释放出来；H+离子浓度愈大，释放出来的重金属离子就愈多。在环境变得极酸性时，粘土矿物吸附的重金属离子几乎全部被释放出来，进入环境或流体。

       åŒä¸€ç§å…ƒç´ çš„不同存在形式，表现出不同的地球化学行为。例如，钼可以有五种不同的价态，有可能生成多种化合物，因而有复杂的地球化学行为。在我国华南的红壤、砖红壤分布地区和东北森林土地带，土壤中总钼的含量都相当高，一般在w（Mo）=3×-6以上，甚至达w（Mo）=×-6左右，大大高于世界土壤总钼的平均含量。但这些地区的高钼含量非但没有损害该地区的植物，相反还表现出某种程度的供钼不足，需要施钼肥促进植物生长。这种现象的产生在华南与土壤属偏酸性、富含铁和铝氧化物及粘土有关，因为这样的环境束缚了能被植物吸收的高价钼（MoO4）2-的活动。而在东北地区，酸性的富含腐殖质等有机物的环境，使钼发生复杂的聚合反应，形成很难被植物根系吸收的巨大分子复杂化合物，如[H3MoO]3-等聚多酸。如在上述地区农田中合理地施用石灰，就可在不额外施用钼肥的情况下解除植物缺钼的症状，因为石灰提高了土壤的碱性，有利于形成（MoO4）2-离子，也有利于附近的（MoO4）2-离子从土壤吸附体中被释放出来，参与到土壤-植物的循环中去。

       åˆå¦‚对矿产资源的可利用性，元素的存在形式有时比元素的含量更有意义。如在超基性岩中镍的含量一般较高，但即使达到了矿床的工业品位，也不等于其就有开采价值。因为如果镍存在于硅酸盐中，其基本不能被利用，但如果镍以硫化物形式存在，就有良好的利用价值了。

       2.6.2.2 元素在水流体相（真溶液）中的存在形式

       å…ƒç´ åœ¨æ°´æµä½“相中也有多种存在形式，首先它们可以按基本单位和聚合体的大小分成颗粒物、胶体、絮状物和分子，在真溶液中则仅包括分子和离子。由于水溶液中的水分子 H2O在任何条件都会发生一定程度的电离，生成 H+和OH-离子，因此离子在水溶液中就有与 H+或与 OH-结合的倾向性，倾向与H+离子结合的为酸性离子，倾向与OH-结合的为碱性离子，离子的酸碱性强弱与它们的离子电位有关。

       2.6.2.2.1 离子电位

       ç¦»å­ç”µä½Ï€æ˜¯ç¦»å­å¤§å°å’Œç¦»å­ç”µè·çš„综合作用效果，决定了离子吸引价电子的能力π值为离子电价与离子半径（单位为 nm）的比值。在水溶液中阳离子与O2-之间争夺电子的能力，或与 OH-争夺价电子的能力的相对高低，决定了离子的酸碱性。阳离子吸引价电子的能力低于 H+的显碱性，以简单阳离子或氢氧化物的形式存在；而吸引价电子的能力大于 H+的阳离子显酸性，在水溶液中以酸根配离子形式存在；吸引价电子能力与 H+相近的离子显两性，即在酸性溶液中呈碱性，在碱性溶液中呈酸性，在正常的天然水溶液中易以氢氧化物形式沉淀，难于迁移；高价阳离子离子电位高，在水溶液中可呈多种形式的配合离子。常见离子的离子电位见图2.。

       åœ¨å›¾2.中，离子的性质和行为可按π进行分类：

       å›¾2. 元素的离子电位图

       ï¼ˆ1）π＜2.5：为电价低半径大的碱性阳离子，在水溶液中同 H+争夺 O2-的能力弱，其氧化物溶于溶液，带出O2-，形成简单阳离子和OH-，如：

       åœ°çƒåŒ–å­¦

       ï¼ˆ2）π=2.5～8.0：为两性离子，多偏高价和具中等半径，在水溶液中与H+争夺O2-的能力弱，其氧化物易与H2O形成氢氧化物沉淀，如反应：

       åœ°çƒåŒ–å­¦

       è¿™ç±»å…ƒç´ åœ¨å¼ºé…¸æ€§æ¡ä»¶ä¸‹å‘ˆç®€å•ç¦»å­ï¼Œåœ¨æ­£å¸¸å¤©ç„¶æ°´æº¶æ¶²ä¸­ï¼ˆpH=）生成氢氧化物沉淀。如果体系中出现高浓度的具高电负性的配合剂，如F-、Cl-等，则配合剂可以从氢氧化物中夺取阳离子，形成复杂的配离子使之溶解、迁移。

       ï¼ˆ3）π＞8：离子半径小的的高价阳离子，在水溶液中争夺O2-的能力比H+强，会夺取H2O中的O2-并与之结合成配阴离子，由于使H+游离，溶液显酸性，称为酸性离子。反应方式如：

       åœ°çƒåŒ–å­¦

       è¿™ç»„离子在正常天然水溶液中主要呈易溶的酸根离子形式迁移。其中π=8～的一组离子易形成多元酸复杂配离子。

       æ€»ä¹‹ï¼Œç¦»å­çš„基本性质决定了其在化学反应中的行为及在自然环境中的迁移习性。

       2.6.2.2.2 配离子及其地球化学意义

       é…ç¦»å­æ˜¯æŒ‡æˆåˆ†ç›¸å¯¹ç¨³å®šçš„原子团组成的，又称为基团，它们具有独立的化学和晶体化学性质，在一定的物理化学条件下可以在固相、溶液相或熔融相中稳定存在。

       ï¼ˆ1）配离子的形成与性质。配离子由一个中心阳离子与数个阴离子或中性分子以配位键方式结合而成，与中心阳离子结合的阴离子或分子也叫配位体。配离子的形成机制可以由一个简单的实验加以说明：若在AgNO3溶液中加入少量NaCl，则立即形成白色AgCl沉淀。其反应式为：

       åœ°çƒåŒ–å­¦

       ç„¶è€Œï¼Œè‹¥å†åŠ å…¥è¿‡é‡çš„ NaCl，则已形成的 AgCl沉淀出现溶解的现象，因为体系中形成了可溶的[AgCl2]-配离子，其反应如下：

       åœ°çƒåŒ–å­¦

       [AgCl2]-配离子中，Ag+为中心阳离子，Cl-为配位体。[AgCl2]-也可以看成是一个电荷未达平衡的分子，其内部 Ag—Cl 为共价键结合，基团整体带有一个负电荷。配离子[AgC]-有与AgCl和 Cl-都不相同的化学性质，其主要特征是在内部形成了整个原子基团范围内闭合的分子轨道，在外部以点电荷的静电力与反号离子以离子键相结合。因此，配离子盐和络合物是一种复杂的多键型化合物，其化学通式为：

       åœ°çƒåŒ–å­¦

       å¼ä¸­ï¼ŒA、B和 X分别为：阳离子、中心阳离子和配位体，m、n 为离子或配位体数目。一般情况下，A的离子电位π＜2.5，B 的离子电位π＞2.5，X 为强电负性元素。配离子是一种弱电解质，其电离常数的大小可表示配离子的稳定性，称为配离子的不稳定常数（K不）。设反应：

       åœ°çƒåŒ–å­¦

       K不值愈大（即电离度愈高）的配离子在水溶液中的稳定性愈差，元素迁移能力也差。

       ï¼ˆ2）强电解质配合剂。天然水溶液中可能存在的络合物中的配位体分为无机配位体和有机配位体两大类：①无机配位体如 Cl-、F-、O2-、S2-、OH-、等；②有机配位体如亲水性基团-COO-、-NH2、RS-、ROH、RO-，以及胶状高分子有机酸、腐殖酸等。实验证明，只有在高浓度配位体环境中才有利于配位作用的进行。因此，可以推断地壳中配合反应在富集配位体（配合剂）的条件最容易发生，如在岩浆期后富挥发分溶液、卤水溶液中等均易发生。强电解质如 NaCl 在水溶液中有较高的溶解度，使配合反应正向进行。其次，具高电负性的配位体如等化学性质活泼，可以取代化合物中的弱电负性的阴离子或弱配位体，形成较稳定的配离子，代表性反应如下：

       åœ°çƒåŒ–å­¦

       é«˜æµ“度碱性阳离子的存在也有利于配离子的形成，根据化学反应酸碱平衡原则，在富含碱性离子的体系中，具有两性性质的大多数成矿元素表现出偏酸性的化学性质，有利于这些元素与配位体结合成配离子。碱性阳离子如Na+、K+、Ca2+、Mg2+等（A）也可以看成是一种配合剂，它们和配位体（X）一起与成矿元素（B，π=2.5～8.0）相结合形成具有强迁移能力的Amï¼»BXn］型的络合物。

动态实现elementui不同用户el-form中的输入框el-input校验项不同

       在讨论动态实现ElementUI不同用户el-form中的输入框el-input校验项不同的场景时，我们首先需要理解，校验的实现方式不仅仅依赖于所选的UI库，更深层次的是基于业务需求以及权限管理的实现。在ElementUI中，当涉及到后台管理系统时，权限问题确实是一个关键点，即不同的用户可能看到不同的表单结构或功能。

       以两个用户为例，用户一可能需要填写“姓名”、“邮箱”和“电话号码”，而用户二可能只需填写“姓名”和“邮箱”。这种差异性是基于用户权限或业务逻辑的设定，而非界面元素的简单复制。

       为了实现这种动态差异，我们可以从以下几个方面着手：

       HTML代码示例

       在HTML层面，你可以通过条件渲染（如Vue的v-if或v-show）来动态展示或隐藏不同的输入字段。例如，你可以为每个输入字段添加一个对应的属性或数据绑定，来决定特定用户是否能看到该字段。

       JavaScript代码示例

       在JavaScript或Vue的组件逻辑中，你可以根据当前登录用户的权限数据（如角色或功能集合）来动态设置表单的结构。使用如`this.$store.state.user.permissions`或直接`localStorage`等方式获取用户权限信息，以此来决定哪些字段是必填项。

       实现逻辑

       在用户登录后，根据用户权限获取到的配置信息，动态调整表单的结构。例如，通过计算或条件判断，确定哪些输入框应为必填项，并在表单渲染时应用相应的校验规则。对于必填项的校验，ElementUI提供了一系列的验证方法，如`rules`属性来定义验证规则。

       最终效果是，不同用户登录系统后，看到的表单结构和必填项都会根据其权限配置自动调整。对于未填写的必填项，系统会自动进行校验并给出相应的提示信息，以此提升用户体验和数据质量。

       总结而言，实现这一功能的关键在于结合前端框架提供的动态渲染能力，与后端权限管理逻辑的紧密配合。通过合理设计数据流和组件状态，可以有效实现不同用户在相同表单中看到不同校验逻辑的目标。

elementUI form表单中 label 和 content 水平对齐并居中

       本文阐述了在elementUI表单组件中实现label和content水平对齐并居中的方法。无需过于复杂的调整，只需遵循以下步骤。

       在版本vue：2.7.和element-ui：2..中，实现此效果并非难事。首先，让我们了解不应用任何样式时的初始状态与输出。

       未进行任何样式调整时，元素无法居中，且label和content无法水平对齐。此时的布局可能无法满足设计需求。

       为解决居中问题，我们引入了样式调整。通过调整style属性，元素成功实现居中效果。接下来，我们关注于解决label和content的水平对齐问题。

       观察到label与content高度不一致的情况后，我们通过设置相同的行高（line-height）来实现对齐。通过调整style代码，label与content终于实现了水平对齐。

       至此，我们已成功达成预期的布局效果。为了方便参考，完整代码已一并附上，包含从初始状态到最终实现的全部步骤。