element UI使用

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表单

<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> </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: {
           name: [
             { required: true, message: '请输入活动名称', trigger: 'blur' },
             { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
           ],
           region: [
             { required: true, message: '请选择活动区域', trigger: 'change' }
           ]
 }

<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;

  <el-table
     :data="tableData"
     style="width: 100%"
     :row-class-name="tableRowClassName">
 </el-table>

 <style>
   .el-table .warning-row {
     background: oldlace;
   }

   .el-table .success-row {
     background: #f0f9eb;
   }
 </style>

  methods: {
       tableRowClassName({row, rowIndex}) {
         if (rowIndex === 1) {
           return 'warning-row';
         } else if (rowIndex === 3) {
           return 'success-row';
         }
         return '';
       }
     },

需要有操作按钮的：

  <el-table-column
       fixed="right"
       label="操作"
       width="120">
       <template slot-scope="scope">
         <el-button
           @click.native.prevent="deleteRow(scope.$index, tableData)"
           type="text"
           size="small">
           移除
         </el-button>
       </template>
     </el-table-column>

点击某一行，添加样式

  <el-table
       :data="tableTreeDdata"
       size="mini"
       class="table-fixed"
       style="width: 100%;"
       type="selection"
       v-loading="loading"
       @row-click="rowClick"
       :row-class-name="tableRowClassName1"
       :row-style="selectedHighlight"
     >
methods:　　　　

tableRowClassName1 ({row, rowIndex}) {

//把每一行的索引放进row

row.index = rowIndex;

},

selectedHighlight({row, rowIndex}) {

if ((this.getIndex) === rowIndex ) {

return {

"background-color": "#efa3b2"

};

}

},

rowClick (row) {

this.getIndex=row.index

},

5.Pagination分页

 <span class="demonstration">完整功能</span>
     <el-pagination
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage4"
       :page-sizes="[100, 200, 300, 400]"
       :page-size="100"
       layout="total, sizes, prev, pager, next, jumper"
       :total="400">
     </el-pagination>

其中：入参需要是data中的元数据；total是后台获取的；当前页也是元数据；

 <!-- 分页 -->
     <div class="toolbar" style="padding:10px;margin-bottom: 30px;">
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="listQuery.page"
         :page-size="listQuery.rows"
         layout="total, prev, pager, next, jumper"
         :total="total"
       ></el-pagination>
     </div>

 handleSizeChange(val) {
       this.listQuery.rows = val;
       this.findTreeData();
     },
     handleCurrentChange(val) {
       this.listQuery.page = val;
       this.findTreeData();
     }