VUE element-ui table 整合多选及编辑按钮和分页

之前的文章已经讲过怎么证明element-ui table插件，现在给table添加check复选框及编辑按钮
子页面：

<template>
  <div>
  <el-table :data="tableData"
            :default-sort="{prop:tableProp , order: tableOrder}"
            @sort-change="changes"        <!--监听排序事件-->
            border
            @selection-change="changeFun"><!--监听选择事件-->
    <el-table-column
      type="selection"
      width="55">
    </el-table-column><!--添加复选框列-->
    <el-table-column v-for="(item,key) in tableKey"
                     :key="key"
                     :prop="item.value"
                     :label="item.name"
                     sortable></el-table-column>
    <!--添加操作列-->
    <el-table-column
      fixed="right"
      label="操作"
      width="90"
      v-if="tablep.caozuo">
      <template slot-scope="scope" >
        <div class="info_btn">
          <span @click="change(scope.row.id)">修改</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <!--整合分页插件-->
    <el-pagination
      name="fenye"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>
  </div>
</template>
<script>
  export default{
    name: 'mytable',
    data(){
      return{
        tableData: [],
        currentPage:1,
        pageSize:10,
        tableProp:this.tablep.prop,
        tableOrder:this.tablep.order,
        sort:1,
        total:0,
        removeArr: []
      }
    },
    //获取父页面传参
    props:['tableKey','tablep'],
    methods:{
       //排序监听方法
      changes({ column, prop, order }){
        this.tableProp = prop;
        this.tableOrder = order;
        if(order !== 'descending'){
            this.sort = 0;
        }else{
            this.sort = 1;
        }
        this.tableChang();
        return false;
      },
      //监听页面个数更改事件
      handleSizeChange(val) {
        this.currentPage = 1;
        this.pageSize = val;
        this.tableChang();
      },
      //监听翻页事件
      handleCurrentChange(val) {
        this.currentPage = val;
        this.tableChang();
      },
      //通用更新table数据
      tableChang(){
        this.$post(this.tablep.url,{
          pageSize: this.pageSize,
          current: this.currentPage,
          orderBy:this.tableProp,
          sort:this.sort
        }).then(res=>{
          this.total = res.data.total;
          let arr = res.data.list;
          this.tableData = JSON.parse(JSON.stringify(arr));
        })
      },
      //修改方法
      change(id){
        this.$router.push({
          name: this.tablep.update,
          query: {
            id: id
          }
        })
      },
      //监听选择事件通过$emit()将更改数值传送到父页面
      changeFun(val){
        this.removeArr = []
          for(let va of val){
           this.removeArr.push(va.id)
        }
        this.$emit('listenTochildEvent',this.removeArr)
      }
    }
  }
</script>

table添加selection-change复选框监听事件，添加el-table-column type为宽度自定义
添加el-table-column操作列v-if="tablep.caozuo"控制操作列是否显示，通过scope.row.id获取id并传送给修改方法
父页面：

<template>
  <div class="alert">
    <div class="container">
    <!--使用字组件，将数据传送到子组件，通过`v-on`方法监听子页面传送数据`listenTochildEvent`为子页面定义方法`showMessageFromChild`为父页面调用方法
    设置`ref`方便父页面使用`$refs`方法调用子页面方法-->
      <sl-table :tableKey="tableKey" :tablep="tablep" v-on:listenTochildEvent="showMessageFromChild" ref="child"></sl-table>
    </div>
  </div>
</template>

<script>
    //引入子页面
  import Table from '@/components/mytable';
  export default {
    data () {
      return {
      //设置列名，字段名
        tableKey: [{
          name: '列名',
          value: 'name'],
        tablep:{
          url:'',//table加载后台接口
          prop:'level',//排序字段
          order: 'descending',//正反序
          update:'',//修改方法路由地址
          caozuo:true//操作列是否显示
        },
        removeArr:[]//缓存删除code
      }

    },
    components: {
      'sl-table': Table//定义sl-table
    },
    methods:{
        //页面跳转方法
      newartic(){
        this.$router.push({
          name: ''
        })
      },
      //监听子页面传参并缓存本地
      showMessageFromChild(data){
        this.removeArr=data
      },
      remove(){
        if(this.removeArr.length>0){
          this.$confirm('此操作将永久删除该条活动, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$get('',{
              id: this.removeArr.join()
            }).then(res=>{
              if(res.code == 0){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                setTimeout(()=>{
                  //重新请求数据
                  this.$refs.child.tableChang();
                },0)
              }
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        }else{
          this.$message({
            message: '请选择需要删除的内容！',
            type: 'warning'
          });
        }
      }
    }
  }

</script>