基于Vue+element-ui的Table二次封装的实现-梓潼大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

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

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

成都创新互联公司是专业的三原网站建设公司，三原接单;提供成都做网站、成都网站建设、成都外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行三原网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

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

效果图

基于Vue+element-ui 的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 += "
"
     }
     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组件

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

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

当前题目：基于Vue+element-ui的Table二次封装的实现
当前网址：http://sczitong.cn/article/jphhph.html

新闻中心

其他资讯