element-ui表格封裝（分頁、自定義設置等）

最近要開發一個cms系統，開發技術棧選用了vue+element-ui，第一次使用，邊踩坑邊總結，這裏將表格的封裝的思路及代碼分享出來給你們討論學習，其中還有不少不完善的地方須要改進，你們能夠提出，互相交流學習。

話很少說，貼代碼，首先是組件代碼table.vue

<template>
  <div>
    <el-table ref="multipleTable" :data="tableData[0].data.slice((currentPage-1)*pagesize,currentPage*pagesize)" :stripe=true @selection-change="tableSelectionChange">
      <slot>
        <el-table-column type="selection" width="55">
        </el-table-column>
      </slot>
      <el-table-column
        v-for="(col,key) in tableData[0].cols"
        :prop="col.prop"
        :label="col.label"
        :key="key"
        >
      </el-table-column>
      <el-table-column v-if="isShow"
        label="操做"
        width="140">
          <template slot-scope="scope">
            <slot name="operate_txt" :todo="scope">
              <el-button @click="handleClick(scope,scope.row,scope.$index)" type="text" size="small">刪除</el-button>
            </slot>
          </template>
      </el-table-column>
    </el-table>
    <!--分頁-->
    <el-col :xs="24" :sm="24" :md="24" :lg="24" class="page">
      <slot name="batch_ban"></slot>
      <el-pagination class="page_bottom" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData[0].data.length">
      </el-pagination>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props:['tableData','isShow'],
  data () {
    return {
      del_id:[],
      currentPage:1,
      pagesize:10
    }
  },
  mounted(){
    console.log(this.del_id);
  },
  methods:{
    handleClick(scope,row,index){
      console.log(scope);
      console.log(row);
      console.log(index);
    },
    tableSelectionChange(val) {//tips:當用戶手動選擇table checkbox時觸發
      this.del_id = val;
      this.$emit("del_data",this.del_id);
      console.log(this.del_id);
    },
    handleSizeChange(size) {
      this.pagesize = size;
    },
    handleCurrentChange(currentPage){
      this.currentPage = currentPage;
    },
  }
}
</script>
<!---->
<!-- Add "scoped" attribute to limit CSS to this component only-->
<style lang="scss" scoped>
  .el-pagination{
    text-align: right;
  }
  .page_bottom{
    margin-bottom: 30px;
  }
  .page{
    overflow: auto;
    margin-top: 5px;
    button{
      float: left;
      width: 90px;
      height: 28px;
      border: 1px solid #dcdfe6;
      border-radius: 3px;
      background: #fff;
      outline: none;
      &:hover{
        background: #409EFF;
        color: #fff;
        cursor: pointer;
        border: 1px solid #409EFF;
      }
    }
  }
</style>

tableData數據格式：

tableData: [{
        data:[],//用於存放請求回來須要渲染的數據
          cols: [
            {prop: 'id', label: '序號'},
            {prop: 'position_name', label: '類型'},
            {prop: 'loop', label: '狀態'},
            {prop: 'started_at', label: '發佈時間'},
            {prop: 'updated_at', label: '修改時間'},
            {prop: 'link', label: '跳轉連接'}
          ]
        }],

其中分頁代碼你們參考餓了麼文檔便能理解，這裏簡單說下操做欄，因爲每一個頁面表格會有不一樣樣式（有無操做列），這裏由父組件傳遞數據isShow來控制table操做欄的顯示隱藏，true爲帶操做欄的表格，false則相反。其中table組件操做欄採用了做用域插槽（每一個table的操做選項可能不一樣），父組件調用時可自定義配置，具體調用代碼以下：

<Table :tableData="tableData":isShow="true" v-on:del_data="showChild">
    <template slot="operate_txt" slot-scope="scope">
        <el-button slot="reference" @click="settingClick(scope)" type="text" size="small">設置</el-button>
        <el-button slot="reference" @click="deleteClick(scope)" type="text" size="small">刪除</el-button>
        <el-button slot="reference" @click="updateClick(scope)" type="text" size="small">更新</el-button>
    </template>
    <div slot="batch_ban"class="batch_ban"><button @click="alot_delete">批量刪除</button></div>
</Table>

其中:tableData="tableData"用來傳遞table數據給子組件table.vue，v-on:del_data="showChild"用來接收子組件傳來的id值（用於批量刪除/禁用等，下文會講到），操做選項中刪除按鈕對應的deleteClick(scope)事件，其中scope即可獲得當前行你想要的的全部信息，包括id、name等，拿到相應的數據好比id，配合axios你就能夠進行相應的操做啦~~

deleteClick(obj){
      console.log(obj.todo.row.id);
      axios.post(this.baseUrl+'/banners/del/'+obj.todo.row.id+'?_token='+this.globe_token,{}).then((res)=>{
        if(res.data.msg=='success'){
          this.$message({
            message: '刪除成功!',
            type: 'success'
          });
          var time=setInterval(()=>{
            location.reload();
            clearInterval(time);
          },1000);
        }
        console.log(res);
      }).catch((err)=>{
        console.log(err);
      });
    },

最後再講下批量xx，因爲某些表格不須要批量功能，批量xx在子組件table.vue中定義具名插槽<slot name="batch_ban"></slot>便於自定義，功能的實現首先要在子組件中定義selection-change事件：

<el-table @selection-change="tableSelectionChange">
 methods:{
    tableSelectionChange(val) {//tips:當用戶手動選擇table checkbox時觸發
      this.del_id = val;
      this.$emit("del_data",this.del_id);//將id數組傳給父組件
      console.log(this.del_id);
    }
  }

而後在父組件中接收：

<Table v-on:del_data="showChild">
methods:{
    showChild(data){//用來接收子組件傳來的數據
      console.log(data);
      this.childMsg=data;//用childMsg保存傳來的數據，方便調用
    }
}
//遍歷this.childMsg便能獲得相應id，以後就能夠愉快的批量刪除

到這裏，一個可複用的表格組件就完成了，相信整個思路會對初次使用element-ui作表格的前端有必定幫助，其中有寫的不清楚的或者錯誤的地方，但願你們批評指正，相互交流學習，共同進步！