目录
一、使用
二、了解组件
1.表格
2.翻页组件-pagination
3. Form表单
4. Tree树形组件
5.Dialog对话框组件
官方地址：https://element.eleme.cn/#/zh-CN
ElementPlus(适配Vue3.0的版本)官方地址： https://element-plus.org/#/zh-CN
一、使用
1.下载
npm i element-ui -S-S生产依赖包，表示项目上线也需要使用(默认可不写) 开发依赖 -D
2.全局导入 main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);3.测试使用
<el-button type="success">成功按钮</el-button>二、了解组件
1.表格
<template>
<div>
<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-column label="操作">
<!-- slot-scope 固定写法 scope随便起的变量名 -->
<template slot-scope="scope">
{{ getGender(scope.row.gender) }}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
gender: 0
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
gender: 0
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
gender: 1
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
gender: 1
}]
}
},
methods: {
getGender (gender) {
return gender === 0 ? '男' : '女'
}
},
}
</script>数据源由table组件的data属性来指定（不需要我们自己用v-for指令来循环）
- 行(data)，决定表格的数据。它是数组，数组中的每一个元素是一个对象，表示一行。
- 列，决定表格结构。 列由el-table-column决定，下面有三个属性需要掌握
- label：决定当前列显示出的标题
- prop：决定当前列数据的来源。对于表格来说， 它的数据是一个数组，每一个元素是一个对象，这里的prop值就是这个对象中的属性名
prop="date"。 这里的prop就是用来从每一个对象中取出属性名为date的 属性值。
- width: 用来设置列的宽度。如果不设置，它会自适应。
我们可以在列里进行使用插槽 作用域插槽slot-scope="scope" v-slot="scope"
通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
2.翻页组件-pagination
<template>
<div>
<!-- total 总条目数 page-size 每页显示条目个数，支持 .sync 修饰符 -->
<el-pagination
@current-change="btn"
background
layout="prev, pager, next"
:total="100"
:page-size="5"
>
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
// 他有一个默认参数 当前页码
btn (curPag) {
console.log(curPag)
}
},
}layout中的关键字有自己的含义； prev 上一页 pager 每页 next下一页 :total总数量 :page-size="5" 每页显示几条
@current-change(curPag) 默认参数 当前页码
3. Form表单
<template>
<div class="login">
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="手机号" prop="phone" size="mini">
<el-input
type="password"
v-model="ruleForm.phone"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" size="mini">
<el-input
type="password"
v-model="ruleForm.password"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')"
>提交</el-button
>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import '../assets/style/index.css'
export default {
name: 'Login',
data () {
return {
ruleForm: {
phone: '',
password: '',
},
rules: {
phone: [
{ required: true, message: '手机号不能为空', trigger: 'blur' },
{ pattern: /^1[3,4,5,6,7,8]\d{9}$/, message: '不允许输入空格等特殊符号', trigger: 'blur' },
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ min: 6, max: 8, message: '长度在 6 到 8 个字符', trigger: 'blur' },
{//自定义效验规则
validator: function (rule, value, callback) {
if (value === '123456') {
callback(new Error('密码过于简单'))
} else {
callback()
}
}, trigger: 'blur'
}
]
}
}
},
methods: {
submitForm () {
this.$refs.ruleForm.validate(valid => {
if (valid) {
console.log('成功')
this.$router.push('/')
} else {
console.log('失败')
}
})
},
resetForm (formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
<style scoped>
.login {
width: 330px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.el-input--mini /deep/ .el-input__inner {
width: 200px;
}
</style>给form绑定 :model 验证data数据中的对象名， 绑定rules 校验的规则
Form-Item 绑定prop属性 为校验的规则里的对象
定义的rules
不同的UI框架不同的验证方式
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ pattern: /^\d{6}$/, message: '请输入合法的验证码', trigger: 'blur' },
{ min: 6, max: 8, message: '长度为6-8位', trigger: 'blur' }自定义校验规则 callback()必须写 如果不写不通过
{
validator: function (rule, value, callback) {
if (value === '123456') {
callback(new Error('密码过于简单'))
} else {
callback()
}
}, trigger: 'blur'
}步骤
1.定义验证规则 按(element-ui的要求来)
2.配置模板 应用规则
给表单设置rules属性传入验证规则
给表单设置model属性传入表单
给表单中的元素(Form-Item) 设置prop 设置需要效验的字段名
3.手动兜底校验： 正则只是为了标红 ，同样可以点击触发事件 所以我们要进行兜底校验
submitForm () {
this.$refs.ruleForm.validate(valid => { //ruleForm 给表单设置ref
if (valid) {
// valid 就是表单验证的结果，如果是true，表示通过了
console.log('成功')
this.$router.push('/')
} else {
console.log('失败')
}
})
},4. Tree树形组件
<template>
<div>
<el-tree
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
></el-tree>
</div>
</template>
<script>
export default {
data () {
return {
data: [{
label: '项目经理 张大大',
children: [{
label: '产品leader-小亮',
children: [{
label: '产品-小丽'
}, {
label: '产品-大光'
}]
},
{
label: 'UIleader-小美',
children: [{
label: 'ui-小高'
}]
},
{
label: '技术leader-老马',
children: [{
label: '前端-小刘'
}, {
label: '前端-小华'
}, {
label: '后端-小李'
}]
},
{
label: '测试leader-老王',
children: [{
label: '测试-小赵'
}, {
label: '测试-小强'
}]
},
{
label: '运维leader-老李',
children: [{
label: '运维-小涛'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
handleNodeClick (data) {
console.log(data)
},
filterNode (value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
}
},
};
</script>数据项中label和children是关键字，不可随意改动。tree组件用它们来显示内容
如果你非要去自定义这个两个关键字：label和children的话，就需要用到props属性了。
defaultProps:{
label:'name',
children:'childList'
}当我们点击某个树形子节点
<template>
<el-tree :data="data" @node-click="handleNodeClick"></el-tree>
</template>
<script>
export default {
methods:{
// 共三个参数，
// 依次为：
// - 传递给 data 属性的数组中该节点所对应的对象
// - 节点对应的 Node
// - 节点组件本身
handleNodeClick(a,b,c){
console.log(a,b,c)
}
}
}
</script>但是实际场景 后端给我们返回的数据可能是这样的
如何转换呢？ 链接
5.Dialog对话框组件
<template>
<div>
<el-button type="text" @click="dialogVisible = true"
>点击打开 Dialog</el-button
>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<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
}
},
methods: {
handleClose (done) {
this.dialogVisible = false
console.log(done)
}
}
}
</script>默认四个地方可以关闭
1. 弹出层外面
2. esc
3. ×号
4.确定取消
显然 前两个并不是我们想要的 我们可以看文档进行关闭这两个操作
<el-dialog
:close-on-press-escape="false" //面板
:close-on-click-modal="false" //esc
width="30%"
:before-close="handleClose"
>
遇到问题如何解决？
- 去官网 底端找常见问题/社区
- 向组件的作者提问 跳转
- 修改源码
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
