标签：you efs 创建 无边框 回车 else prevent method 长度
1.Button按钮
<el-button type="text">文字按钮</el-button>设置type="text"，可以是无边框的效果。
2.Link文本链接
<el-link href="https://element.eleme.io" target="_blank">默认链接</el-link> 可以有a标签的效果。
3.Form表单
1 <el-form ref="form" :model="form" label-width="80px"> 2 <el-form-item label="活动名称"> 3 <el-input v-model="form.name"></el-input> 4 </el-form-item> 5 </el-form>
label-width：设置所有label的宽度；
当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent
表单验证：<el-form :rules="rules" status-icon :model="ruleForm">,当不符合验证规则时，label前会有红色*;status-icon为校验添加小图标，√ 或 ×；
<el-form-item label="活动名称" prop="name" ref="ruleForm"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>1
rules: {
2 name: [
3 { required: true, message: ‘请输入活动名称‘, trigger: ‘blur‘ },
4 { min: 3, max: 5, message: ‘长度在 3 到 5 个字符‘, trigger: ‘blur‘ }
5 ],
6 region: [
7 { required: true, message: ‘请选择活动区域‘, trigger: ‘change‘ }
8 ]
9 }
<el-button type="primary" @click="submitForm(‘ruleForm‘)">立即创建</el-button>
submitForm(ruleForm) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert(‘submit!‘);
} else {
console.log(‘error submit!!‘);
return false;
}
});
},
4.Table表格
为指定的一行增加class;
1 <el-table 2 :data="tableData" 3 style="width: 100%" 4 :row-class-name="tableRowClassName"> 5 </el-table> 6 7 <style> 8 .el-table .warning-row { 9 background: oldlace; 10 } 11 12 .el-table .success-row { 13 background: #f0f9eb; 14 } 15 </style> 16 17 methods: { 18 tableRowClassName({row, rowIndex}) { 19 if (rowIndex === 1) { 20 return ‘warning-row‘; 21 } else if (rowIndex === 3) { 22 return ‘success-row‘; 23 } 24 return ‘‘; 25 } 26 },
需要有操作按钮的：
1 <el-table-column 2 fixed="right" 3 label="操作" 4 width="120"> 5 <template slot-scope="scope"> 6 <el-button 7 @click.native.prevent="deleteRow(scope.$index, tableData)" 8 type="text" 9 size="small"> 10 移除 11 </el-button> 12 </template> 13 </el-table-column>
5.Pagination分页
1 <span class="demonstration">完整功能</span> 2 <el-pagination 3 @size-change="handleSizeChange" 4 @current-change="handleCurrentChange" 5 :current-page="currentPage4" 6 :page-sizes="[100, 200, 300, 400]" 7 :page-size="100" 8 layout="total, sizes, prev, pager, next, jumper" 9 :total="400"> 10 </el-pagination>
其中：入参需要是data中的元数据；total是后台获取的；当前页也是元数据；
1 <!-- 分页 --> 2 <div class="toolbar" style="padding:10px;margin-bottom: 30px;"> 3 <el-pagination 4 @size-change="handleSizeChange" 5 @current-change="handleCurrentChange" 6 :current-page="listQuery.page" 7 :page-size="listQuery.rows" 8 layout="total, prev, pager, next, jumper" 9 :total="total" 10 ></el-pagination> 11 </div> 12 13 14 15 handleSizeChange(val) { 16 this.listQuery.rows = val; 17 this.findTreeData(); 18 }, 19 handleCurrentChange(val) { 20 this.listQuery.page = val; 21 this.findTreeData(); 22 }
标签：you efs 创建 无边框 回车 else prevent method 长度
原文地址：https://www.cnblogs.com/lesliejavascript/p/10970011.html
