简单table封装

面对element-ui table 有好多可以复用，首先来学习下简单封装复用table写法，实现高效小前端，减少一下代码复用，提高效率完成table数据渲染复用

1、首先创建一个table封装的组件

<template>
  <!-- 
    @param tableData 父组件传值
    @param loading [Boolean] 加载提示
    @param border [Boolean] table边框
  -->
  <el-table
      ref="table"
      :data="tableData"
      v-loading="loading"
      element-loading-text="Loading"
      :border="border"
      fit highlight-current-row
      tooltip-effect="dark"
      style="width:100%"
      @sort-change="handleSortChange"
      @selection-change="handleSelectionChange">
        <!-- 
          @name 展开查看详情
          @param tableLabel 父组件传值
          @param label [string] 名称
          @param render 配置格式化数据
         -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form 
            class="table-expand" 
            >
              <el-form-item 
                v-for="(item,index) in tableLabel"
                :key="index"
                :label="item.label">
                <span v-if="item.render">
                  {{item.render(scope.row)}}
                </span>
                <span v-else>{{scope.row[item.param]}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!--
          @name 操作
          @param tableOption 父组件传值
          @param label [string] 名称
          @param width [string] 宽度
          @param options [array] 按钮数组
          @param type 按钮类型
          @param icon 按钮图标
          @param handleButton 按钮方法 
         -->
        <el-table-column 
          v-if="tableOption.label" 
          :width="tableOption.width" 
          :label="tableOption.label" 
          align="center" 
          class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button  
            v-for="(item,index) in tableOption.options" 
            :key="index" 
            :type="item.type" 
            :icon="item.icon" 
            @click="handleButton(item.methods,scope.row,scope.$index)" 
            size="mini">
              {{item.label}}
            </el-button>
          </template>
        </el-table-column>
        <!-- 
          @name 标题+表格数据显示
          @param tableLabel 父组件传值
          @param width 【string】宽度
          @param align 【string】对齐方式
          @param label [string] 名称
          @param sortable [Boolean] 排序
          @param render 配置格式化数据
        -->
        <div
          v-for="(item,index) in tableLabel" 
          :key="index">
          <el-table-column 
            v-if="item.show"
            :width="item.width ? item.width : ''" 
            :align="item.align" 
            :label="item.label" 
            :prop="item.param" 
            :sortable="item.sortable ? 'custom' : false">
            <template slot-scope="scope">
              <span v-if="item.render">
                {{item.render(scope.row)}}
              </span>
              <span v-else>{{scope.row[item.param]}}</span>
            </template>
          </el-table-column>
        </div>

    </el-table>
</template>

<script>
/**
 * @name 表格封装
 * @export TableElement
 * @param loading [Boolean] 配置加载提示
 * @param tableData [Array] 数据
 * @param tableMain [Array] 数据详情
 * @param tableLabel [Array] 配置表格头部
 * @param tableOption [Object] 操作按钮
 * @param border [Boolean] 配置边框
 */
  export default {
    props:{
    loading:{
      type:Boolean,
      default:false
    },
    tableData:{
      type:Array,
      default: () => {
        return []
      }
    },
    tableMain:{
      type:Array,
      default: () => {
        return []
      }
    },
    tableLabel:{
      type:Array,
      default: () => {
        return []
      }
    },
    tableOption:{
      type:Object,
      default: () => {
        return {}
      }
    },
    border:{
      type:Boolean,
      default: false
    }
  },
  components:{},
  methods: {
    // methods:按钮名称 row：同一行的数据 index：第几行（0开始）
    handleButton(methods,row,index){  // 按钮事件
      console.log(row)
      this.$emit('handleButton',{'methods':methods,'row':row})
    },
    handleSortChange(val){  // 排序
      this.$emit('handleSortChange',val)
    },
    handleSelectionChange(val){
      this.$emit('handleSelectionChange',val)
    }
  }
    
  }
</script>

<style lang="scss" scoped>
  .table-expand {
    font-size: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

2、table 组件导入使用

<template>
  <div>
    <TableElement
      :loading="loading"
      :table-data="tableData"
      :table-label="tableLabel"
      :table-option="tableOption"
      @handleButton="handleButton"
      @handleSortChange="handleSortChange"
      @handleSelectionChange="handleSelectionChange"
    ></TableElement>
  </div>
</template>

<script>
import TableElement from "@/components/Table/index"; // 导入table组件，具体路径以自己为主
export default {
  data() {
    return {
      loading:false,
      border:true,
      tableData: [
        {
          usr:'yy',
          company:'hahahha',
          email:'[email protected]',
          registTime:'2019 8',
          status:'1'
        },
        {
          usr:'aa',
          company:'hahahha',
          email:'[email protected]',
          registTime:'2019 8',
          status:'1'
        },{
          usr:'c',
          company:'hahahha',
          email:'[email protected]',
          registTime:'2019 8',
          status:'1'
        },{
          usr:'b',
          company:'hahahha',
          email:'[email protected]',
          registTime:'2019 8',
          status:'1'
        }
      ],
      tableLabel: [
        { label: "用户名", param: "usr", align: "center", sortable: true,show:true },
        { label: "公司名称", param: "company", align: "center",show:false },
        { label: "办公邮箱", param: "email", align: "center", width: "200",show:true },
        { label: "注册时间",param: "registTime",lign: "center",show:true,ortable: true},
        { label: "审核状态",param: "status",align: "center",show:true,sortable: true,
          render: row => {
            if (row.status === 0) {
              return "未审核";
            } else if (row.status === 1) {
              return "审核通过";
            } else if (row.status === 2) {
              return "审核不通过";
            } else {
              return "禁用";
            }
          }
        }
      ],
      tableOption: {
        label: "操作",
        width: "200",
        options: [
          {
            label: "预览",
            type: "primary",
            icon: "el-icon-view",
            methods: "preview"
          },
          {
            label: "审核",
            type: "primary",
            icon: "el-icon-upload2",
            methods: "audit"
          }
        ]
      }
    };
  },
  methods:{
    handleButton(data) {
      switch(data.methods) {
        case 'preview':
          this.preview()
          break;
        case 'audit':
          console.log('audit')
          break;
      }
    },
    preview() {
      console.log('preview');
    },
    // 排序规则
    handleSortChange() {
      console.log('排序规则')
    },
    handleSelectionChange() {}

  },
  components: {
    TableElement
  }
};
</script>

<style lang="scss" scoped>
</style>

总结

1. 简单的学习封装，如果有更好建议可以在下面留言
2. 上面的有写规则例如排序的还没完善，后面更新一些规则进去