ElemnetUi组件使用（二）

• Table 表格组件

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作

使用：当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽

table

• 分页组件

当数据量过多时，使用分页分解数据。

image.png

 <!-- 分页组件 -->
    <!-- 
      background   按钮背景
      layout="total,prev, pager, next,jumper" 布局组件，分别为总数，前一页，当前页，下一页，跳转
      :total="listpage.total"    数据总条目数
      :current-page.sync="listpage.currentNo"     当前页数
      :page-size="listpage.pageSize"      每页显示多少条数据
      @current-change="CurrentPage"        当current-page改变时的操作
    -->
    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="listpage.total"
      :current-page.sync="listpage.currentNo"
      :page-size="listpage.pageSize"
      @current-change="CurrentPage"
    ></el-pagination>

• Upload 上传组件

     <!-- 文件上传 -->
      <!-- 
        action="https://jsonplaceholder.typicode.com/posts/"  //上传的地址
        :on-preview="handlePreview" //点击已上传文件的操作
        :on-remove="handleRemove"   //移除文件的操作
        :before-remove="beforeRemove"//移除文件之前的操作 
        multiple       //是否支持多选文件
        :limit="3"     //允许最大上传文件数
        :on-exceed="handleExceed"   //文件超出个数的操作
      :file-list="fileList"  //上传的文件列表
      -->
      <el-upload
        class="upload-demo"
        action="https://jsonplaceholder.typicode.com/posts/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>