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


Posted in Javascript onJuly 20, 2018

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

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

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

效果图

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

使用插槽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;
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - ComboBox组合框
Oct 07 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
Javascript中String的常用方法实例分析
Jun 13 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
JavaScript字符串对象
Jan 14 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 #Javascript
详解vue-cli官方脚手架配置
Jul 20 #Javascript
Vue中的异步组件函数实现代码
Jul 20 #Javascript
vue 中的keep-alive实例代码
Jul 20 #Javascript
Angularjs实现页面模板清除的方法
Jul 20 #Javascript
搭建vue开发环境
Jul 19 #Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 #jQuery
You might like
星际RPG字典
2020/03/04 星际争霸
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
Javascript实现的分页函数
2007/02/07 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
基于vue.js快速搭建图书管理平台
2017/10/29 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
python方向键控制上下左右代码
2018/01/20 Python
python在每个字符后添加空格的实例
2018/05/07 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python制作动态字符图的实例
2019/01/27 Python
详解Django-restframework 之频率源码分析
2019/02/27 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
毕业生自荐信
2013/12/14 职场文书
高三生物教学反思
2014/01/25 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
给老婆的保证书范文
2014/04/28 职场文书
2014年团工作总结
2014/11/27 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书