element-UI_studyrecords

最新推荐文章于 2023-11-07 15:58:26 发布

helloHaoli

最新推荐文章于 2023-11-07 15:58:26 发布

阅读量430

点赞数

分类专栏： Element-UI Web前端文章标签： ui vue.js elementui

本文链接：https://blog.csdn.net/malilmm/article/details/128062566

版权

Web前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Element-UI

1 篇文章 0 订阅

订阅专栏

参考element-ui官方文档:
https://element.eleme.cn/#/zh-CN/component/installation

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:/¹+$/, 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	是否开启拖拽节点功能