el-form
template
el-form提供表单校验功能,:rules属性设置校验规则,通过el-form-item的prop属性绑定校验规则。
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
<el-form-item prop="username">
<el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" />
</el-form-item>
<el-form-item prop="password">
<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin"/>
</el-form-item>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
</el-form>
el-form标签属性 | 说明 |
ref | 给元素或子组件注册引用信息(它是ID的替代)。获取真实DOM元素或组件实例对象。 |
:model | 指定表单使用的数据。 |
rules | |
auto-complete | 是否启动自动完成。即是否允许浏览器预测对字段的输入。 |
label-position |
el-form-item标签属性 | 说明 |
prop | el-form-item的prop属性必须与el-input中需要校验的表单属性一致。 |
el-input标签属性 | 说明 |
:key | |
ref | 给元素或子组件注册引用信息(它是ID的替代)。获取真实DOM元素或组件实例对象。 |
v-model | 如果v-form绑定了rules进行表单校验,那么el-input绑定的数据必须是el-form的model的直接属性。否则会导致校验失败。 |
:type | |
placeholder | |
name | |
tabindex | |
auto-complete | |
@keyup.enter.native | 回车事件。'.native’覆盖原有封装的keyup事件。 |
el-button的标签属性 | 说明 |
:loading | |
type | |
style | |
@click.native.prevent |
参考资料:
(125条消息) el-form的model、prop属性和表单校验等详解_别来打扰我的博客-CSDN博客
:rules
在data中详写刚刚给el-form(ref=“loginForm”)绑定的校验规则(:rules=“loginRules”)。校验规则要针对template中el-form-item定义好的prop进行校验。可以有required,也可以有正则表达式。
export default{
name:'Login',
data(){
//...
return{
//绑定的rules值
loginRules:{
//针对el-form-item的prop
username:[{ //username的校验规则
required:true, //必填字段
trigger:'blur', //失去焦点时,则触发校验,校验不成功进行提示
validator:validateUsername //自定义校验函数
}],
password:[{ //password的校验规则
required:true,
trigger:'blur',
validator:validatePassword
}]
}
}
}
}
rules(eg: loginRules)中的关键字 | 说明 |
Type | |
required | 指明该input框是必填字段。即非空验证。 |
pattern | 正则表达式 |
min/max | 判断数据大小范围,通常对数字大小范围做校验。对于字符串和数组类型的校验是根据长度进行比较的。 |
Len | 长度验证。 如11位手机号码:iphone:[{type:“number”, required:true, len:11}] len属性与min\max属性同时出现时,len属性有更高的优先级。 |
enum | 枚举值验证。{type:“enum”, enum:[‘admin’,‘user’,‘guest’]} |
whitespace | 验证是否只有空格 |
transform | 在验证之前转换值。 {type:‘string’, required:true, pattern:/1+$/, transform(value) { return value.trim() } } |
fields | 深层规则 |
message | 支持字符串、html、vue-i18n |
validator | 自定义验证函数。能够实现比较复杂的业务逻辑判断。 |
trigger | trigger:'blur’表示失去焦点时,则触发校验,校验不成功进行提示 另外还有 trigger:‘change’ |
el-form的:rules="rules"需要结合this.$refs [formName].validate ((valid) => {}来做
validate函数:是否校验成功
this.$ref["loginForm"].validate(valid =>{
// 校验成功:派发actions,获取token,并执行路由跳转
if(valid){
this.$store.dispatch('user/login',this.loginForm).then(()=>{
this.$router.push({path:this.redirect || '/'})
})
console.log("submit!")
}else{
//校验失败
console.log("error submit!")
return false
}
})
el-row
el-table
template
js中获取表格:给el-table添加ref属性为表格做唯一标识
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
<el-table-column>
</el-table-column>
</el-table>
el-table的标签属性 | 说明 |
stripe | 是否使用斑马纹 |
border | 是否使用边框 |
height | 固定表头、只要设置了属性,就会自动固定表头。 |
max-height | 位表格设置最大高度 |
el-table-column的标签属性 | 说明 |
prop | |
… |
el-tree
template
基础结构
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" >
</el-tree>
带checkbox的
<el-tree :data="data" :props="defaultProps" show-checkbox></el-tree>
懒加载自定义叶子节点
<el-tree :props="props" :load="loadNode" show-checkbox lazy></el-tree>
默认展开和默认选中
默认展开——default-expanded-keys
默认选中——default-checked-keys
注意,此时必须设置node-key。其值为节点数据中的一个字段名,且改字段在整棵树中是唯一的。
<el-tree :data="data" :props="defaultProps" show-checkbox node-key="id" :default-expanded-keys="[2,3]" :default-checked-keys="[5]"></el-tree>
禁用状态
在data中通过给节点数据增加 disabled:true 设置禁用状态。可将Tree的某些节点设置为禁用状态。
<el-tree :data="data" :props="defaultProps" show-checked node-key="id" :default-expanded-keys="[2,3]" :default-checked-keys="[5]"
export default{
data(){
return{
data:[{
{
id:1,
label:'一级1',
children:[{
id:2,
label:"一级1-1",
disabled:true //将该节点设置为禁用状态
}]
}
}]
}
}
}
获取和设置checked节点(通过Node或key)
export default{
methods:{
//1获取checked节点
//-1.1node方法
getCheckedNotes(){
console.log(this.$refs.tree.getCheckedNoted())
}
//-1.2key方法
getCheckedKeys(){
console.log(this.$refs.tree.getCheckedKeys())
}
//2设置checked节点
//-2.1node方法
setCheckedNodes(){
this.$refs.tree.setCheckedNotes([
{
id:5,
label:'二级2-1'
},
{
...
}
])
}
//-2.2key方法
setCheckedKeys(){
this.$refs.tree.setCheckedKeys([3])
}
}
}
自定义树节点内容
两种方法:(1)render-content (2)scoped slot
<!-- 使用scoped slot -->
<el-tree :data="data" :props="props" show-checked node-keys="id" default-expand-all >
<span class="custom-tree-node" slot-scope="{node,data}">
<span>{{ node.label }}</span>
<span>
<el-button type="text" @click="()=>append(data)">Append</el-button>
<el-button type="text" @click="()=>remove(node,data)">Delete</el-button>
</span>
</span>
</el-tree>
export default{
data(){
const data=[{
...
}]
return{
data:JSON.parse(JSON.stringify(data))
}
},
methods:{
append(data){
const newChild = {id: ,label: ,children:[]}
if(!data.children){ //该节点没有children
this.$set(data,'children',[])
},
data.children.push(newChild)
},
remove(node,data){
const parent = node.parent
const children = parent.data.children || parent.data
const index = children.findIndex(d => d.id === data.id)
children.splick(index,1)
}
}
}
script
export default{
data(){
return{
data:[
{
label:'一级1',
children:[{
label:'二级1-1',
children:[{
label:'三级1-1-1',
children:[{
...
}]
}]
}]
},
{
label:'二级2',
children:[{...},{...}]
},
{
label:'三级3',
children:[{...}]
}
],
defaultProps:{
children:'children',
label:'label'
}
}
},
methods:{
handleNodeClick(data){
}
}
}
Attributes
参数 | 说明 |
data | 树内容 |
node-key | 每个节点的唯一标识 |
props | 配置选项 |
load | 加载方式 |
lazy | 是否懒加载 |
highlight-current | 是否高亮当前选中节点,默认值是false |
default-expand-all | 是否默认展开所有节点,默认值是false |
expand-on-click-node | 是否在点击节点的时候展开或者收缩节点,默认值是true。 如果为false,表示只有当点击箭头图标的时候才会展开或收缩。 |
check-on-click-node | 同上 |
auto-expand-parent | 展开子节点的时候是否自动展开父节点,默认值是true。 |
default-expanded-keys | 默认展开的节点的key的数组 |
default-checked-keys | 默认选中的节点的key的数组 |
show-checkbox | 节点是否可被选择 |
check-strictly | |
draggable | 是否开启拖拽节点功能 |
Methods
Tree内部使用了Node类型的对象来包装用户传入的数据,用来保存目前节点的状态。
方法名 | 说明 | 参数 |
filter | ||
updateKeyChildren | ||
getCheckedNodes | 返回目前被选中的节点所组成的数组 | |
setCheckedNodes | 设置目前勾选的节点 | |
Events
事件名 | 说明 | 回调参数 |
node-click |
- a-z ↩︎