基于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

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. 在组件中直接引用

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();
    }
  }
};