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

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

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

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

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 { 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; }}