基于Vue+element-ui 的Table二次封装的实现

本人第一次写这个 写的不好还望指出来

作为一个由于公司产品的升级然促使我从一个后端人员自学变成前端的开发人员 ！

公司做的数据管理系统所以离不开表格了 然后表格样式统一啥的就想到封装一个element-ui 里面的table+pagination了

效果图

表格组件的引入与使用

<com-table title="监测数据" v-model="tabledata4" @selection-change="handleselectionchange">
    <template>
     <el-table-column type="selection" width="55" align="center">
     </el-table-column>
     <el-table-column prop="name" label="表格名称" align="center">
     </el-table-column>
     <el-table-column label="测点" align="center">
      <template slot-scope="scope" v-if="scope.row.point.visible">
       <el-input v-model="scope.row.point.value" placeholder="请输入内容" @focus="focuspoint(scope.row.point)"></el-input>
      </template>
     </el-table-column>
     <el-table-column label="项目" align="center">
      <template slot-scope="scope" v-if="scope.row.item.visible">
       <el-input v-model="scope.row.item.value" placeholder="请输入内容" @focus="focusitem(scope.row.item)"></el-input>
      </template>
     </el-table-column>
    </template>
   </com-table>

使用插槽slot 使用起来就和原来的table一样了

import comtable from '@/components/common/com-table'
import { gettempletexportlist, gettempletexportinfo } from '../../../api/transfer/index'
import apiconfig from '@/api/apiconfig'
export default {
 name: 'templet',
 components: {
  comtable
 },
 data() {
  return {
   tabledata4: [],
   exporttabledata: [],
   multipleselection: [],
   currentpoint: null,
   currentitem: null,
   itemdialogshow: false,
   pointdialogshow: false,
   path: new apiconfig().getconfig().syspath,
   checkeditem: [],//选中数据
  }
 },
 computed: {
  moduletype() {
   return this.$store.state.moduletype;
  },
  userinfo() {
   return this.$store.state.user.userinfo;
  }
 },
 watch: {
  moduletype() {
   this.init();
  }
 },
 created() {
  this.init();
 },
 methods: {
  init() {
   gettempletexportlist(this.userinfo.cityid, this.moduletype).then(re => {
    this.exporttabledata = re.data;
    this.tabledata4 = [];
    re.data.map(item => {
     this.tabledata4.push({
      name: item.fldtabledesc,
      point: {
       visible: false,
       value: ''
      },
      item: {
       visible: true,
       value: item.itemlist
      }
     })
    })
   }, (error) => {
    this.$message({
     customclass: 'el-message_new',
     message: error,
     type: 'error'
    });
   })
  },
  handleselectionchange(val) {
   console.log(val)
   this.multipleselection = val;
  },
  focuspoint(val) {
   this.currentpoint = val;
  },
  focusitem(val) {
   this.currentitem = val;
   this.itemdialogshow = true;
  },
  itemconfirm() {
   this.itemdialogshow = !this.itemdialogshow;
  },
  itemhandleclose(done) {
   this.itemdialogshow = false;
  },
  itemgroupselectchange(val) {
   this.checkeditem = val;
   console.log(this.checkeditem);
   let groupitemcontent = [];
   val.map(item => {
    groupitemcontent.push(item.flditemname);
   })
   this.currentitem.value = groupitemcontent.join(',');
  },
  submit() {
   if (this.multipleselection.length > 0) {
    let message = "";
    let data = [];
    let name = "";
    this.multipleselection.map((item, index) => {
     name = item.name;
     let str = item.name;
     let info = false;
     if (item.item.visible && item.item.value == "") {
      message += `表[${str}]请选择因子`;
      info = true;
     }
     if (item.point.visible && item.point.value == "") {
      if (info) {
       message += `、请选择测点/断面！`;
      } else {
       message += `表[${str}]请选择测点/断面！`;
      }
      info = true;
     }
     if (info) {
      message += "<br/>"
     }
     data.push({
      "autoid": "1",
      "stcode": "",
      "pcode": "",
      "rcode": "",
      "rscode": "",
      "gdcode": "",
      "type": this.moduletype,
      "itemcodelist": item.item.value.split(',').join('^'),
      "path": `${this.path.templetexportsetting}${this.moduletype}.json`,
      "isneednulldata": "y"
     })

    })
    if (message == "") {
     gettempletexportinfo(data).then(re => {
      if (re.status == "ok") {
       var exportdata = eval((re.data));
       const { export_json_to_excel } = require("../../../libs/export2excel");
       if (exportdata[0].merg.length != 0) {
        var exdata = [];
        var itemlistunit = [];
        var itemlistfldcharcode = [];
        for (var z = 0; z < exportdata[0].head.length - this.checkeditem.length; z++) {
         itemlistunit.push(exportdata[0].head[z]);
         itemlistfldcharcode.push(exportdata[0].head[z])
        }
        this.checkeditem.map(item => {
         itemlistunit.push(item.fldunit);
         itemlistfldcharcode.push(item.fldcharcode);
        })
        var exdata = this.formatjson(exportdata[0].head, exportdata[0].data);
        exdata.unshift(itemlistunit);
        exdata.unshift(itemlistfldcharcode);
        exdata.unshift(exportdata[0].head);
        console.log(exdata)
        exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0])
        export_json_to_excel([name], exdata, name, exportdata[0].merg);
       } else {
        var exdata = this.formatjson(exportdata[0].head, exportdata[0].data);
        exdata.unshift(exportdata[0].head);
        exportdata[0].merg.push([0, 0, exportdata[0].head.length - 1, 0])
        export_json_to_excel([name], exdata, name, exportdata[0].merg);
       }

      } else {
       this.$message({
        message: '导出失败！',
        type: 'error'
       });
      }
     })
    } else {
     this.$message({
      dangerouslyusehtmlstring: true,
      customclass: 'el-message_new',
      message: message,
      type: 'warning'
     });
    }
   } else {
    this.$message({
     customclass: 'el-message_new',
     message: '请先选择要导出的列表！',
     type: 'warning'
    });
   }
  },
  formatjson(filterval, jsondata) {
   return jsondata.map(v =>
    filterval.map(j => {
     return v[j];
    })
   );
  }
 }
}

comtable组件

<template>
 <div class="com-table">
  <div class="com-table-title" v-if="title">
   {{title}}
  </div>
  <div :class="[title?'com-table-content':'com-table-content-nottitle']">
   <el-table v-loading="loading" ref="multipletable" stripe :data="tabledata" style="width: 100%;" height="100%" border @selection-change="handleselectionchange" @row-click="rowclick" @row-dblclick='rowdblclick' @cell-dblclick="celldblclick">
    <slot></slot>
   </el-table>
  </div>
  <div class="com-table-page">
   <el-pagination @size-change="handlesizechange" @current-change="handlecurrentchange" :current-page="pageindex" :page-sizes="page_sizes" :page-size="size" :layout="layout" :total="total">
   </el-pagination>
  </div>
 </div>
</template>
<script>
import commomway from '../../common/commonway.js' //分页
export default {
 name: 'com-table',
 props: {
  value: {//数据
   type: [array, object],
   default: () => {
    return [];
   }
  },
  pagesize: {//当前一页显示多少条数据
   type: number,
   default: 20
  },
  page_sizes: {//分页规则
   type: array,
   default: () => {
    return [1, 20, 40, 60, 80]
   }
  },
  current_page: {//当前所在页
   type: number,
   default: () => {
    return 1;
   }
  },
  layout: {
   type: string,
   default: () => {
    return 'total, sizes, prev, pager, next, jumper';
   }
  },
  title: {//表格title
   type: string,
   default: () => {
    return '';
   }
  },
  loading: {
   type: boolean,
   default: false
  }
 },
 data() {
  return {
   tabledata: [],
   //页数索引  
   pageindex: this.current_page,
   //每页显示的数量
   size: this.pagesize,
   oldmultipleselection: [],//旧的选中值
   multipleselection: []//当前选中数据
  }
 },
 watch: {
  value(val) {
   this.getpagedata();
  },
  tabledata(val) {
   // console.log(val);
  },
  multipleselection(val, old) {
   this.oldmultipleselection = old;
  }

 },
 mounted() {
  this.getpagedata();
 },
 computed: {
  total() {
   return this.value.length;
  }
 },
 methods: {
  //获得分页后的数据
  getpagedata() {
   var common = new commomway();
   this.tabledata = common.pagination(this.pageindex, this.size, this.value, false);
   this.$emit("input", this.value);
   settimeout(() => {//由于表格重新渲染延迟执行勾选
    this.toggleselection(this.oldmultipleselection)
   }, 20)

  },
  //点击每页显示数量时触发
  handlesizechange: function (val) {
   this.size = val;
   this.getpagedata();
   this.$emit('handlesizechange', val);
  },
  //翻页的时候触发
  handlecurrentchange: function (val) {
   this.pageindex = val;
   this.getpagedata();
   this.$emit('handlecurrentchange', val);

  },
  handleselectionchange(val) {
   this.multipleselection = val;
   this.$emit('selection-change', val);
  },
  toggleselection(rows) {//勾选值
   if (rows) {
    rows.foreach(row => {
     this.$refs.multipletable.togglerowselection(row);
    });
   } else {
    this.$refs.multipletable.clearselection();
   }
  },
  rowclick(row, event, column){
    this.$emit('row-click', row, event, column);
  },
  celldblclick(row, column, cell, event){
   this.$emit('cell-dblclick', row, column, cell, event);
  },
  rowdblclick(row,enent){
   //console.log(row,enent)
  }
 }
}
</script>
<style lang="sass">
 @import "./com-table.scss";
</style>

commonway.js

class commonway {
 /**
  * description：对数组的分页处理
  * author:bilimumu
  * date:2017-10-28 
  * @param {number} [pageno=1] 页码
  * @param {number} [pagesize=10] 每页显示条数 
  * @param {any} [obj=[]] 待分页的数组
  * @param {boolean} [iscreatenewdata=true] 是否创建新的数据
  * @returns 返回新的数组
  * @memberof commonway
  */
 pagination(pageno = 1, pagesize = 10, obj = [], iscreatenewdata = true) {
  var array = [];
  if (iscreatenewdata) {
   array = json.parse(json.stringify(obj));
  } else {
   array = obj;
  }
  var offset = (pageno - 1) * pagesize;
  return (offset + pagesize >= array.length) ? array.slice(offset, array.length) : array.slice(offset, offset + pagesize);
 }
}

export default commonway

com-table.scss

.com-table {
 height: 100%;
 width: 100%;
 &-title {
  color: #fff;
  background: #42a2f5;
  padding: 0;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-indent: 8px;
 }
 &-content {
  width: 100%;
  height: calc(100% - 40px - 55px);
 }
 &-content-nottitle {
  width: 100%;
  height: calc(100% - 55px);
 }
 &-page {
  height: 55px;
  width: 100%;
  background: #eff3f8;
  display: flex;
  align-items: center;
  justify-content: center;
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。