基于elementUI 二次封装的 VUE Table组件

需求：

1. 可以search检索。

2. 带分页

3. 带固定列

4. 可以嵌入组件

   
   

二次封装的组件源码：

<template>
<div>
  <el-table
    :data="table.tableData"
    @sort-change = "sortChange"
    :empty-text="$t('MSG_TABLE_EMPTY')"
    :default-sort = "table.defaultSort"
    style="width: 100%">
    <el-table-column
      v-for="col in table.tableLabel"
      :type="col.type"
      :fixed="col.fixed"
      :prop="col.prop"
      :label="$t(col.title)"
      :min-width="col.width"
      :sortable="col.sort"
      :formatter="col.formatter"
      :show-overflow-tooltip="col.ellipsis">
    </el-table-column>
    <el-table-column
      v-if="table.status"
      width="100"
      :label="$t('STATUS')">
      <template slot-scope="scope">
        <el-switch
          :disabled="table.status.disabled"
          v-model="scope.row.active"
          active-color="#52BEA6"
          inactive-color="#CACDD0"
          :active-value="1"
          :inactive-value="0">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      v-if="table.tableOption"
      fixed="right"
      align="center"
      header-align="center"
      :label="$t('ACTION')"
      :width="table.tableOption.width">
      <template slot-scope="scope">
        <el-button v-for="btn in table.tableOption.buttons"
                   @click="handleButton(scope.row,btn.methods)" type="text" size="small">
          {{ $t(btn.label) }}</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10,25,50]"
      layout="total, sizes, prev, pager, next"
      :total="table.total">
    </el-pagination>
  </div>
</div>
</template>

<script>
export default {
  name: "voTable",
  props:{ table:Object,pageParam:Object},
  methods: {
    sortChange(obj){
      let orderBy = {};
      if(obj.order) {
        if (obj.order.substr(0, 1) === 'a') {
          orderBy = obj.prop + " asc"
        }
        if (obj.order.substr(0, 1) === 'd') {
          orderBy = obj.prop + " desc"
        }
      }
      this.$emit('search',{pageNo:this.pageParam.pageNo,pageSize:this.pageParam.pageSize,orderBy: orderBy});
    },
    handleButton(row,methods) {
      this.$emit('action',{'row':row,'methods':methods});
    },
    handleSizeChange(val) {
      this.$emit('search',{pageNo:this.pageParam.pageNo,pageSize: val ,orderBy: this.pageParam.orderBy});
    },
    handleCurrentChange(val) {
      this.$emit('search',{pageNo:val,pageSize: this.pageParam.pageSize,orderBy: this.pageParam.orderBy });
    }
  }
}
</script>

引入页面：

<template>
     <div class="tableBox">
       <voTable @search="search" :table="tableAll" :pageParam="getTable" 
       @action="action"></voTable>
     </div>
</template>
<script>
import voTable from '@/components/voTable.vue'
import axios from 'axios'
export default {
  name: "user-list",
  components:{ voTable },
  data:()=>({
    tableAll:{
      defaultSort:{prop:'createdTime',order:'descending'},
      status:{disabled:true},
      tableLabel:[
        {prop:'username',title:'USER_ID',width:'150',fixed:true},
        {prop:'email',title:'ACCOUNT_EMAIL_ADDRESS',width:'200'},
        {prop:'roleName',title:'ACCOUNT_ROLE_GROUP',width:'200'},
        {prop:'createdTime',title:'CREATED_TIME',width:'200',sort:true,formatter:(row)=>{
            return moment(row.createdTime).format('YYYY-MM-DD HH:mm:ss');
          }}
      ],
      tableData: [],
      tableOption:{
        width:'100',
        buttons:[
          {label:'BTN_DETAIL',methods:'detail'},
          {label:'BTN_DELETE',methods:'delete'}
        ]
      },
      total:0
    },
    /*你的请求参数*/
    getTable:{
      pageSize: 10,
      pageNo: 1,
      username: '',
      roleId: null,
      orderBy:''
    }
  }),
  methods:{
      action(obj){
          if(obj.methods === 'detail'){
              console.log('这里添加详情函数')
          }
           if(obj.methods === 'delete'){
            console.log('这里添加删除函数')
          }
      },
    search(obj){
      this.getTable.pageSize = obj.pageSize;
      this.getTable.pageNo = obj.pageNo;
      this.getTable.orderBy = obj.orderBy;
      this.$post(‘你的后台API地址’,this.getTable).then((res) => {
        this.tableAll.tableData = res.data.result;
        this.tableAll.total = res.data.total
      })
    }
  },
  mounted:function(){
      axios.post(‘你的后台API地址’,this.getTable).then((res) => {
        this.tableAll.tableData = res.data.result;
        this.tableAll.total = res.data.total
      })
  }
}
</script>