element UI使用

Posted 2021-12-18 lesliejavascript

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