基于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 相关文章推荐
javascript 写类方式之十
Jul 05 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
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
php把session写入数据库示例
2014/02/26 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
js轮播图代码分享
2016/07/14 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python如何进行时间处理
2020/08/06 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
管道维修工岗位职责
2013/12/27 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
劳模事迹材料范文
2014/12/24 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python