基于element table 的二次封装

在平常工作中，尤其是在vue + element 的后台管理系统中 用的table 很多，但是直接引用element 封装的table代码很多，造成代码冗余。在这个基础上又封装一个table，减少代码。封装成一个table 组件就是可以引用。以下是我封装的table 如有问题提出，谢谢

1. 首先就是在main.js中先进行引用element 。进行使用

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI,{size: 'small'});  // 全局引用设置大小 我这里是 small。

2. 在 component中 创建文件夹 talbe 添加文件 index.vue

<template>
  <div class="table-template">
    <el-table
      id="table"
      ref="table"
      :data="tableData"
      tooltip-effect="dark"
      style="width:100%"
      element-loading-text="拼命加载中"
      border
      size="medium"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column
        v-if="tableOption.mutiSelect"
        type="selection"
        style="width: 40px;"
        align="center"
      ></el-table-column>
      <el-table-column
        type="index"
        width="50"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        v-for="(item,index) in tableLabel"
        :width="item.width ? item.width : ''"
        :key="index"
        :align="item.align"
        :label="item.label"
        :prop="item.prop"
        :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.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="tableHandle.label"
        :width="tableHandle.width"
        :label="tableHandle.label"
        align="center"
        class-name="small-padding fixed-width"
      >
        <!-- button 事件-->
        <template slot-scope="scope">
          <template v-for="(item,index) in tableHandle.options">
            <el-tooltip
              class="item btn-xs"
              placement="top"
              effect="dark"
              :key="index"
              :content="item.label"
            >
              <el-button
                  type="text"
                  size="mini"
                  :icon="item.icon"
                  :disabled="item.disabled"
                  @click.native.prevent="item.method(index,scope.row)"
                >{{item.label}}</el-button>
            </el-tooltip>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件-->
    <el-pagination
      class="table-pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current ? pagination.current : 1"
      :page-sizes="[10,20, 30, 50, 100]"
      :page-size="pagination.size ? pagination.size : 10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total ? pagination.total : 0"
    ></el-pagination>
  </div>

</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableLabel: {
      type: Array,
      default: () => {
        return [];
      }
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          current: 1,
          size: 10,
          total:0
        };
      }
    },
    tableHandle: {
      type: Object,
      default: () => {
        return {};
      }
    },
    tableOption: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {
        stripe: false, // 是否为斑马纹 table
        highlightCurrentRow: false, // 是否要高亮当前行
        border: false
      }
    } // table 表格的控制参数
  },
  components: {},
  methods: {
    // 多行选中
    handleSelectionChange (val) {
      this.multipleSelection = val;
      this.$emit('handleSelectionChange', val);
    },
    //分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.$emit('handleSizeChange', Number(val));
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.$emit('handleCurrentChange', Number(val));
    },
    sortChange (column) {
      // column.order = "ascending" 升序
      // column.order = "descending" 降序
      this.$emit('sortChange', column);
    }
  }
};
</script>

<style lang="scss">
.table-template  {
  .el-table {
    color: #333333;
    .el-table__header-wrapper {
      .has-gutter {
        color: #333333 !important;
        tr {
          th {
            background: #fffef9;
          }
        }
      }
    }
  }
  .table-pagination {
    background: #fff;
    margin-bottom: 20px;
    padding: 5px;
    text-align: right;
  }
}
</style>

3. 在组件中可以把table的把一些静态资源可以剥离出来 建立一个文件 index.js

let _this = null;
//  this 指向问题。
const sendThis = e=> {
  _this = e;
};

// 列表header
const tableHeader = [{
  label: '用户名',
  prop: 'title',
  align: 'center',
  sortable: true
},
{
  label: '用户名',
  prop: 'content',
  align: 'center',
  sortable: true
},
{
  label: '公司名称',
  prop: 'title',
  align: 'center'
},
{
  label: '办公邮箱',
  prop: 'email',
  align: 'center',
  width: '200'
},
{
  label: '注册时间',
  prop: 'display_time',
  align: 'center'
},
{
  label: '审核状态',
  prop: 'status',
  align: 'center',
  render: row => {
    if (row.status === '1') {
      return '已发布';
    } else if (row.status === '2') {
      return '发布中';
    } else if (row.status === '3') {
      return '未发布';
    }
  }
}
];

// 列表操作事件
const tableHandle = {
  label: '操作',
  width: '200',
  options: [{
    label: '修改',
    code: 'cccc',
    method:(index,row)=>{
      _this.handleEdit(index, row);
    }
  },
  {
    label: '删除',
    code: 'gggg',
    method:(index,row)=>{
      _this.handleDel(index, row);
    }
  }]
};

export {
  tableHeader,
  tableHandle,
  sendThis
};

4. 在组件中直接引用

<template>
    <div>
       <TableCom
         :table-option="tableOption"
         :table-data="tableData"
         :table-label="tableHeader"
         :table-handle="tableHandle"
         :pagination='pagination'
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
      ></TableCom>
    </div>
</template>



import TableCom from '@comm/table/index.vue'; //  引用 table 组件
const { tableHeader, tableHandle, sendThis } = require('./index'); //  引用 table静态资源

export default {
  name: 'ArticleList',
  components: {
    TableCom
  },
  data () {
    return {
      tableHeader: tableHeader,
      tableHandle: tableHandle,
      tableData: [],
      tableOption: {
        mutiSelect: false
      },
      pagination: {
        current: 1,
        size: 10,
        total:0
      }
    };
  }

  mounted () {
    sendThis(this); // 设置this指向
    this.getQuery();
  },
  methods: {
    async getQuery () {
      const _this = this;
      var data = {
        size: _this.pagination.size,
        current:  _this.pagination.current
      };
     //  数据请求事件
       const res = await dataAjax({
        url: '/article/list/',
        loading: true,
        data
      });
      _this.tableData = res.records;
      _this.pagination.total = res.total;
    },
    handleEdit (index, row) {
      console.log(row, '1');
    },
    handleDel (index, row) {
      console.log(row, '2');
    },
    handleSizeChange (val) {
      this.pagination.size= val;
      this.getQuery();
    },
    handleCurrentChange (val) {
      this.pagination.current = val;
      this.getQuery();
    }
  }
};