1、安装插件
package.json文件位置运行命令 vue add element 选择按需加载中文即可。
2、安装完毕以后，代码目录如下
在element.js中看到如下代码，表示的就是按需引入，需要什么组件，就引入什么组件，现在只引入了一个按钮组件，注意两点引入的组件名字都是第一个字母大写，use的时候需要单独用一行。用的时候用中间用'-'线的，在这里用的字母大写的方式，因为html中不识别字母的大小写。js中需要用字母的大小写。
下面演示一个表单的使用
直接上代码
<template>
<div>
<el-radio-group v-model="labelPosition" size="small">
<el-radio-button label="left">左对齐</el-radio-button>
<el-radio-button label="right">右对齐</el-radio-button>
<el-radio-button label="top">顶部对齐</el-radio-button>
</el-radio-group>
<div style="margin: 20px;"></div>
<el-form
:label-position="labelPosition"
label-width="80px"
:model="formLabelAlign"
:rules="rules"
ref="ruleForm"
>
<!-- rules中的name和prop的name相对应，否则无效 -->
<el-form-item label="名称" prop="name">
<el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-input v-model="formLabelAlign.region"></el-input>
</el-form-item>
<el-form-item label="活动形式" prop="type">
<el-input v-model="formLabelAlign.type"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
labelPosition: "right",
// 下面这个是表单的数据项
formLabelAlign: {
name: "",
region: "",
type: ""
},
// 下面是验证的规则
rules: {
name: [
{
required: true,
message: "Please input Activity name",
trigger: "blur"
},
{
min: 3,
max: 5,
message: "Length should be 3 to 5",
trigger: "blur"
}
],
region: [
{
required: true,
message: "Please input Activity name",
trigger: "blur"
}
],
type: [
{
required: true,
message: "Please input Activity name",
trigger: "blur"
}
]
}
};
},
methods: {
submitForm(formName) {
// this.$refs[formName]通过这个可以找到这个表单进行验证
this.$refs[formName].validate((valid) => {
if (valid) {
// 验证通过
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
</script>
注意一下几点
1、使用表单验证的时候，使用验证规则rules时，要在from-item上加上prop,prop的值是对应的名字，否则验证无效。
2、ref的使用，通过ref找到相应的表单，对其表单进行整体的处理。
