element 样式记录

非完整代码，个人记录

表格分页 pagination,table

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="id" label="ID" width="75"></el-table-column>
  <el-table-column prop="rolename" label="角色" width="180"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="job" label="职业"></el-table-column>
  <el-table-column fixed="right" label="操作" width="100">
    <template slot-scope="scope">
      <el-button type="text" @click="dialogFormVisible = true;" size="small">编辑</el-button>
      <el-button @click="open(scope.row)" type="text" size="small">删除</el-button>
    </template>
  </el-table-column>
</el-table>

<el-pagination background layout="sizes, prev, pager, next, total, jumper" 
      @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="108" 
      :page-sizes=[5,10,20] :page-size="pageSize" :current-page="curPage"	> </el-pagination>

1. 数据筛选的处理逻辑
2. 点击编辑的处理逻辑
3. 点击删除的处理逻辑
4. 添加数据的处理逻辑
5. 总记录条数，total
6. 点击页码后的处理逻辑
7. 修改每页显示条数的处理逻辑

表单提交和图片上传

用户头像上传

<template>
  <div>
    <el-upload class="avatar-uploader" action="#"
      :show-file-list="false" :auto-upload="false"
      :on-change="handleFileChange" accept="image/*">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="用户头像" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <div class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>

文件缩略图

<template>
  <div>
    <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="handleFileChange">
      <i slot="default" class="el-icon-plus"></i>
      <div slot="default" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
      </div>
    </el-upload>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </div>
</template>