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做表格的前端有一定帮助，其中有写的不清楚的或者错误的地方，希望大家批评指正，相互交流学习，共同进步！

转载于:https://my.oschina.net/u/2917756/blog/2236738