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()
}