1.el-tree,常用属性以及方法介绍
data 数据来源
props 定义数据的键 例如: :props="defaultProps"
default-expand-all 默认展开全部节点
highlight-current 选择当前节点默认高亮
expand-on-click-node 是否在点击节点的时候展开或者收缩节点
node-key 每个树节点用来作为唯一标识的属性，
show-checkbox 开启勾选框,选择节点
check-strictly 显示复选框的情况下，是否严格的遵循父子不互相关联的做法
getCheckedKeys 节点被选择时,返回被选中的key组成的数组
setCheckedKeys 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
一般用于数据回显 需要用到ref方法,获取tree,
然后绑定setCheckedKeys(传入数组)
代码示例
<el-tree
:data="data" // 显示数据
:props="defaultProps" // 数据显示规则 例如: { children: 'children', label: 'name'}:expand-on-click-node="false" default-expand-all @node-click="handleNodeClick"/>
// 里面可以使用插槽来自定义内容
data中的数据如果有多层联级嵌套,需要显示,而且,服务器返回的数据不是嵌套关系,则需要用到数组转树的技术;
export const arr2tree = (arr, rootId = null) => { return arr.filter(item => item.pid === rootId).map(item => ({ ...item, children: arr2tree(arr, item.id).length ? arr2tree(arr, item.id) : null }))}
解析: 在utlis/index.js里面定义方法并导出,在使用组件中导入,传入有关联的id将原数组筛选,筛选出符合条件的数据,然后将数组再次map,给数组元素都添加一个子数组,并再次调用转换函数,再次筛选; 此处rootId,是要求从第几层开始筛选,比如传入一级数据id,就是以一级数据开始
2. el-table
data 对象数组---数据
el-table-column 在上面写prop来对应对象中的键名即可填入数据
lable 定义表格的列名
fixed 列是否固定在左侧或者右侧，true 表示固定在左侧
插槽 用template包裹 v-slot="{row}" row就是该行的数据
// 基本使用
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
<template v-slot="{row}">//row就是该行的数据</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: 'laiking',
address: '武汉市洪山区'
}, {
date: '2016-05-04',
name: 'laiking', address: '武汉市洪山区' }, {
date: '2016-05-01',
name: 'laiking', address: '武汉市洪山区' }, {
date: '2016-05-03',
name: 'laiking', address: '武汉市洪山区' }]
}
}
}
</script>
3.el-pagination 分页器
page-size 每页显示条目个数，支持 .sync 修饰符
total 总条数
page-count 总页数
current-page 当前页数，支持 .sync 修饰符
disabled 是否禁用
size-change pageSize 改变时会触发
current-change currentPage 改变时会触发
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
4. el-form
model 表单数据对象
rules 表单验证规则
validate 对整个表单进行校验的方法，参数为一个回调函数。
该回调函数会在校验结束后被调用，并传入两个参数：
是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
prop 单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
label 标签文本
validator 自定义校验规则
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="活动名称" prop="name"> // 表单检验必须传prop
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
export default {
data() {
return {
ruleForm: { // 表单数据
name: '',
},
rules: { // 校验规则
name: [
// 必填 提示 失去焦点时触发
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{validator: (rule, value, callback) => {
// 自定义校验规则
value === this.ruleForm.name ? callback() : callback(new Error('两次输入不一致')
// value 是当前值 callback() 是放行 里面实例化一个error 可以提示错误信息
}, // 其他规则 }
],
}
}
},
methods:{
async submit(){
this.$refs.ruleForm.validate(val){
// val 兜底校验后通过就是true
if(val) { 后续操作 }
}
-----------
前面提到如果兜底校验时,不传入回调,就会返回一个promise
await this.$refs.ruleForm.validate() //如果校验通过,就执行下方代码
// 后续操作
}
}
}
最近在公司比较空闲,就简单整理了一下,一些简单的element组件的使用,希望能给你带来帮助
