element ui table的使用记录

曾经终败给现在 2021-07-26 00:50 501阅读 0赞

#### table表格 ####

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

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

#### table表格 固定表头 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
官网上其实已经有详细的说明了，那就是给`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()
    }

[element ui _table]: https://element.faas.ele.me/#/zh-CN/component/table
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/7a839891e6e2490884a5120299375353.png