element-UI的基本使用以及部分组件的使用

1.element基本使用

官网:(https://element.eleme.cn/#/zh-CN)

1.1安装

在项目中晚装elementUI

npm i element-ui -S

在main.js中引入并注册

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

1.2使用

1.2.1table组件使用

<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="地址"> </el-table-column></el-table>
</template>
<script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}]}}
}
</script>

属性

lable:决定当前列显示出的标题

prop:决定数据是那个属性

:data:数据源

table组件-自定义插槽

我们需要在对应的列中,使用template标签包裹我们自定义渲染的内容

<el-table-column label="操作" width="100"><template><el-button size="small" type="danger">删除</el-button></template>
</el-table-column>

table组件-自定义列-作用域插槽

后端返回的数据中，只有一个指代性别的编码，为了方便用户查看，需要我们把1转换成男，0转换成女。

解决办法:

<el-table-column label="性别"><!-- 1. slot-scope是固定写法2. scope理解为变量，并不一定需要固定这个名字，el-table-column组件会自动将渲染本行需要的数据传给scope，其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法3. {{ 方法() }} 的作用是执行这个方法，将返回值显示在当前单元格中--><template slot-scope="scope">{{ transGender(scope.row.gender) }}</template>
</el-table-column><script>export default {methods: {transGender(genderCode) {console.log(genderCode)const genderList = {1: '男',0: '女'}return genderList[genderCode]}}}
</script>

1.2.2 Pagination翻页组件

属性:

layout:布局

tatal : 用来设置数据的总条数

@current-change:分页事件

page-size:默认每页10条数据

翻页事件

<template><div><h1>Pagination</h1><el-paginationlayout="prev, pager, next":total="1000"@current-change="pageChange"></el-pagination></div>
</template><script>
export default {methods: {// 把当前点击的页数给传进来pageChange(page) {console.log(page)}}
}
</script>

1.2.3 From表单组件-表单验证

步骤1-定义表单验证规则

rules: {// 字段名1：表示要验证的属性// 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。//     数组中的多条规则会按顺序进行字段名1: [{ 验证规则1 },{ 验证规则2 },],字段名2: [{ 验证规则1 },{ 验证规则2 },],
}

步骤2-模板中的配置

给 el-form 组件绑定 model 为表单数据对象
给 el-form 组件绑定 rules 属性配置验证规则
给需要验证的表单项 el-form-item 绑定 prop 属性，注意：prop 属性需要指定表单对象中的数据名称

代码:

<el-form label-width="80px" :model="form" :rules="rules"><el-form-item label="手机号" prop="mobile"><el-input v-model="form.mobile"></el-input></el-form-item><el-form-item label="密码" prop="code"><el-input v-model="form.code"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button @click="onCancel">取消</el-button></el-form-item>
</el-form>

步骤3-手动兜底验证

element-ui的表单组件.validate(valid => {if(valid) {// 通过了验证} else {// 验证失败}
})

说明：

validate 方法是表单组件自带的，用来对表单内容进行检验。
需要在模板中添加对表单组件的引用：ref 的作用主要用来获取表单组件手动触发验证

代码-模板

<el-form label-width="80px"
+  ref="form":model="form":rules="rules">

添加ref来引用el-form组件

代码:

doLogin () {alert('我可以做登录了')
},
submit () {this.$refs.form.validate(valid => {// valid 就是表单验证的结果，如果是true，表示通过了// console.log(valid)if (valid) {// 通过了验证，你可以做后续动作了this.doLogin()}})
}

注意

下面三个地方的属性名必须一样

表单验证-自定义校验规则

rules:{属性名1: [{ // 注意参数顺序validator: function (rule, value, callback) {// rule：采用的规则// value: 被校验的值// callback是回调函数， //      如果通过了规则检验，就直接调用callback()//      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)//         例如：callback(new Error('错误说明'))}, trigger: 'blur' }]
}

落地代码

rules: {name: [{required: true, message:'必须要填入', triggle: 'blur'}],code: [{validator:(rule, value, callback)=>{console.log(rule, value, callback)if(value === '123456') {callback(new Error('这是世界上最差的密码了'))} else {callback()}},triggle: 'blur'},{min: 6, max:8, message:'长度为6-8位', triggle: 'blur'},{required: true, message:'必须要填入', triggle: 'blur'},]
}

Form表单组件-清理校验痕迹

this.$refs.form组件的引用.resetFields()

1.2.4 Tree组件基础使用

<template><el-tree :data="data"></el-tree>
</template><script>
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'}]}]}]}}
}
</script>

1.2.5 Dialog弹窗组件

<template><div><el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog></div>
</template><script>export default {data() {return {dialogVisible: false}}}
</script>

1.2.6 监听open和close事件

弹框组件有俩种状态，一个是打开一个是关闭，如果我们想在它打开或者关闭时做一些自己的事情，就可以监听俩个事件

@close 弹框关闭 : dialogVisible从true变成false

@open 弹框打开 : dialogVisible从false变成true