element ui table的使用记录

table表格

Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
element ui 中table表格部分链接

最近在做表单，用到了element ui中的表格，目前就工作中遇到的几个问题详细记录一下：

table表格 固定表头

官网上其实已经有详细的说明了，那就是给table定义height属性，就可以实现固定表头的作用了。

table表格中使用switch开关

在table表格中使用switch等其他组件时，必须要使用slot插槽，而且要使用template包裹,否则触发不了
而且此时展示数据的时候需要用到scope.row.xxx的方式来处理插槽中的数据

<el-table-column prop="shopName" label="状态">
  <template slot-scope="scope">
    <el-switch v-model="status" active-color="#13ce66" inactive-color="#EAECF0"></el-switch>
  </template>
</el-table-column>

以上代码中的status，因为目前没有数据，所以是在data中自定义的一个数据，用于测试使用。
因为使用elememt ui 的时间并不是很多，目前发现，如果想要在table中使用其他组件，无论是element ui中的组件，还是自定义的组件，都需要使用template进行包裹，而且使用slot-scope="scope"的插槽形式。

与table表格经常配套使用的分页组件Pagination

layout="total, prev, pager, next,sizes" layout参数的顺序决定了展示分页组件的顺序，包含每页条数 页码组件 总条数等。
:total="pageObj.total" total参数是总条数
:page-sizes="[50, 100, 150, 200]" :page-size="50" page-sizes是每页条数的数组，page-size是当前的每页条数

<el-pagination @size-change="handleSizeChange" layout="total, prev, pager, next,sizes" :total="pageObj.total" @current-change="handleCurrentChange" :page-sizes="[50, 100, 150, 200]" :page-size="50" />

函数部分：

//修改页码
handleCurrentChange(current) {
 this.searchParams.page = current - 1
 //表单加载中的状态
  this.loading = true;
  //加载表单数据
  this.searchShopList()
},
//修改每页展示的数据
handleSizeChange(val) {
  this.searchParams.size = val;
  //表单加载中的状态
  this.loading = true;
  //加载表单数据
  this.searchShopList()
}