精华内容
下载资源
问答
  • Vue:使用vue-json-excel导出数据到excel

    千次阅读 2020-12-11 16:26:12
    使用vue-json-excel导出数据到excel

    vue-json-excel官方文档

    使用方法

    1. 在项目中安装vue-json-excel

    npm install vue-json-excel -S

    2. 在main.js中,将vue-json-excel在全局注册

    import Vue from "vue";
    import JsonExcel from "vue-json-excel";
    
    Vue.component("downloadExcel", JsonExcel);
    

    在这里插入图片描述

    3. API参数解读

    参数名参数类型描述默认值
    data数组需要导出的参数
    fields对象规定导出数据中的字段名称与文件每一列列头名称的关系。
    要导出的JSON对象中的字段。如果没有提供,JSON中的所有属性将被导出。
    export-fields (exportFields)对象解决与其他组件的命名冲突问题。
    用于解决其他使用变量字段的组件(如vee-validate)的问题。exportFields的工作原理与字段完全相同
    type字符串文件类型。xls或者csvxls
    name字符串导出文件名称。data.xls
    default-value (defaultValue)字符串如果某一行没有字段值时候起作用。
    当行没有字段值时用作回退。
    header字符串/数组 导出文件表格标题。
    数据的标题。可以是字符串(一个标题)或字符串数组(多个标题)。
    title(deprecated)字符串/数组 与header一样,为了向后兼容,我们也保留了title,但不建议使用它,因为它会与HTML5的title属性冲突。
    footer字符串/数组 导出文件数据页脚。
    可以是字符串(一个页脚)或字符串数组(多个页脚)。
    ’ ’
    worksheet方法工作表选项卡的名称。‘Sheet1’
    fetch方法在点击下载按钮后,开始下载之前执行的函数。
    回调以获取数据下载之前,如果它被设置设置了,它将在点击鼠标之后立即执行(这个过程是在开始下载之前的)。重要提示:只有在没有定义数据道具的情况下才有效。
    before-generate方法在生成/获取数据之前调用方法,例如:显示加载进度
    before-finish方法在下载框弹出之前调用方法的回调,例如:隐藏加载进度
    stringifyLongNum布尔类型长数字和十进制(解决数字精度丢失的问题),默认:false
    escapeCsv布尔类型这将转义CSV值,以修复一些excel数字字段的问题。但这会用=" and "包装所有csv数据,以避免你不得不将这个道具设为假。默认值:真正的

    4. 关键代码

    1. template标签中

    <download-excel
        :fields="exportDataStandard"
        :data="exportData"
        type="xls"
        :name="exportName"
        :header="exportHeader"
        :footer="exportFooter"
        :defaultValue="exportDefaultValue"
        :fetch="createExportData"
        :before-generate="startDownload"
        :before-finish="finishDownload"
        worksheet="导出信息"
    >
      <el-button icon="el-icon-download">导出</el-button>
    </download-excel>
    

    2. script标签中

    export default {
      name: "BMSStationInfo",
      components: {
        BMSStationInfoDetailInformation
      },
      data() {
        return {
          exportDataStandard: {
            "名称": "name",
            "性别": "sex",
            "地区": {
              field: "phone",
              callback: value => {
                return `他的电话是:${value}`
              }
            }
          },
          exportData: [
            {name: "甲", sex: "女", phone: 15521103211},
            {name: "乙", sex: "男", phone: 15521103222},
            {name: "丙", sex: "女", phone: 15521103233},
            {area: "北京市朝阳区"},
            {name: "丁", sex: "男", phone: 15521103233},
            {name: "丁", sex: "男", phone: 15521103233},
          ],
          exportName: "导出数据",
          exportHeader: ["用户信息页头1","用户信息页头2"],
          exportFooter: ["用户的信息页脚1","用户的信息页脚2"],
          exportDefaultValue: "这一行这一列没有数据"
        }
      },
      methods: {
        createExportData() {
          // 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
          // TODO:构造需要下载的数据返回
          return [
            {name: "甲", sex: "女", phone: 15521103211},
            {name: "乙", sex: "男", phone: 15521103222},
            {name: "丙", sex: "女", phone: 15521103233},
            {area: "北京市朝阳区"},
            {name: "丁", sex: "男", phone: 15521103233},
            {name: "丁", sex: "男", phone: 15521103233},
          ];
        },
        startDownload() {
          console.log("数据开始")
        },
        finishDownload() {
          console.log("数据下载完成")
        }
      }
    }
    

    5. 重点参数具体使用

    1. fields:规定导出数据中的字段名称与文件每一列列头名称的关系。可以使用callback回调函数的形式,对字段进行格式化。如果fields没有规定默认格式的话,会把所有的数据都导出。
      举例:
      在这里插入图片描述

    2. data:需要导出的数据参数,数组中存储对象,每一个对象就是导出的一行数据,data中的键对应fields中的值。
      在这里插入图片描述

    3. default-value:如果某一行中,没有fields中规定的默认数据的话,会导出默认值的值。如图中导出数据中的第三行,没有name、sex和phone,而设置的默认值为:“这一行这一列没有数据”,则导出的样式为:
      在这里插入图片描述

    在这里插入图片描述

    1. header、footer:规定导出信息页头页脚。
      ① 如果是一个字符串,则导出形式如下:
      在这里插入图片描述
      在这里插入图片描述
      ② 如果是一个字符串数组,则导出形式如下:
      在这里插入图片描述
      在这里插入图片描述
    2. worksheet:规定excel表格下方选项卡名称
      在这里插入图片描述
      在这里插入图片描述
    3. fetch、before-generate 、before-finish 这三个接收三个方法。
      ① fetch:点击下载按钮后立即执行,会在开始下载数据前执行。返回值为下载的数据。这里可以将函数定义为async函数,并在里面await暂停等待,请求数据,构造下载所需要的的数据。
      在这里插入图片描述
      ② before-generate、before-finish这两个分别作用于开始下载之前和开始下载之后,可以用来控制显示下载进度条。
    展开全文
  • 今天一个朋友问题vue数据驱动是什么?所以我给大家说说我理解的vue数据驱动。1、首先从字面意思理解下:数据驱动? 什么是数据驱动? 我理解就是通过控制数据的变化来改变某物或某事。2、Vue数据驱动中, 数据...

    0fc36692eb2fd52118ee73c9a359b58a.png

    今天一个朋友问题vue的数据驱动是什么?所以我给大家说说我理解的vue的数据驱动。1、首先从字面意思理解下:数据驱动? 什么是数据驱动? 我理解就是通过控制数据的变化来改变某物或某事。2、Vue的数据驱动中, 数据驱动什么? 就是说物或者事是什么? 这里的vue数据驱动的是视图也就是DOM元素让DOM的内容随着数据的改变而改变, 这里视图(DOM)可以理解成上面的改变的某物或者某事
    当我们知道vue数据驱动的字面意思的时候我们是不是在想vue是怎么实现数据驱动的呢?
    首先我们看下下面的图片(我自己画的)

    394b64ee60f471549649bb238785edec.png

    a

    我不知道大家能不能看懂上面图片,说的通俗一点就有一个人(数据驱动)在监视一个叫(数据)的家伙,一旦这个家伙有任何举动他讲会告诉他的领导(视图DOM),然后领导就会做出一些相应的变化;回到话题就是这个人(数据驱动)怎么监视的呢? 又是怎么把这些情况反映给领导(视图DOM)的呢?首先我们定义一个数据:

    data(){
         return {
            data1:new Object(),
            data2:new Array()
         }
    }
    //view 视图
    <div>{{data1}}</div>
    <div>{{data2}}</div>
    

    我定义了一个对象和一个数组数据并且绑定到视图,然后我们改变一下data1和data2:

    this.data1 = {
        a:2,
        b:3
    }
    this.data2 = [
        {
            name:'test',
            age:10
        },
        {
            name:'test1',
            age:11
        }
    ]
    

    在vue中当改变数据的时候, 视图中的数据也会相应改变。那到底中间做了什么呢?第一怎么监听数据变化?注意:vue的数组类型只允许下面方法操作数组才会触发视图更新:

    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()
    

    数据监听变化:先看vue的文档怎么说的:Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

    6384ccda0f868e070b1b6abfef121d5f.png

    2.png


    vue说递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。这就是话不就是告诉我们他监听了data里面所有的数据吗? 然后转换为getter/setter? 这个时候是不是知道vue是怎么监听data数据啦? 没有错vue监听data是通过defineProperty方法来监听的。
    大家看一下下面的defineProperty如果做到监听对象变化的:

    let data = {
        "a":null
    };
    Object.defineProperty(data,"a",{
        get:()=>{
            console.log('获取数据啦');
        },
        set:()=>{
            console.log('数据发生变化啦');
        }
    })
    //先回车在执行下面代码看变化
    data.a;
    //然后执行下面代码看变化
    data.a = {b:1}
    

    (大家可以复制到Google控制台进行测试下)

    6bfd9557982ce2ed9c00e92286f7d4dc.png

    效果图.png

    现在大家就应该知道vue数据监听怎么做了吧。(小提示:以后大家面试中如果被问题vue为什么不支持 IE8 及以下版本,你就可以说因为vue用了defineProperty方法来监听数据。 因为defineProperty只支持IE9及以上版本浏览器)

    fded239d361588fa27b18374216c4c91.png

    defineProperty兼容性.png


    知道怎么监听数据啦, 就知道这个人是用什么方式来监视这个家伙啦(data数据);然后就是怎么去告诉领导这个家伙(data数据)的变化啦;
    (遗留问题:怎么去实现当真的数据变化去变化视图呢? 大家是不是说可以操作dom啊,vue就不是直接操作DOM,这又是Vue一个神奇的地方那就是Virtual DOM(虚拟DOM树)。大家可以讨论这个问题。谢谢大家)

    :::皮一下

    //直接操作dom
    let data = {
        "a":null
    };
    Object.defineProperty(data,"a",{
        get:()=>{
            console.log('获取数据啦');
        },
        set:(value)=>{
            document.querySelector('#app').innerHTML = JSON.stringify(value);
        }
    })
    

    _ | _ | _ | _ | _ | _知识个人总结,有不对的地方希望大家提出来,大家共同进步。

    展开全文
  • 参考:VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出 一、安装vue-json-excel npm install vue-json-excel -S 二、main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('download...

    参考:VUE中使用vue-json-excel 将后台返回的json以excel表格形式导出
    使用vue-json-excel生成并导出excel

    一、安装vue-json-excel

    npm install vue-json-excel -S
    

    二、main.js中引入

    import JsonExcel from 'vue-json-excel'
    Vue.component('downloadExcel', JsonExcel)
    

    三、简单使用固定数据

    代码

    在这里插入图片描述

    <download-excel
         class = "export-excel-wrapper"
         :data = "json_data"
         :fields = "json_fields"
          header="这是个excel的头部"
          name = "导出的表格名称.xls">
          <el-button type="primary" size="small">导出EXCEL</el-button>
    </download-excel>
    

    数据 (例子中,json_data写死的)

    • json_data:需要导出的数据

    • json_fields:里面的属性是excel表每一列的title,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不指定,默认导出全部数据中心全部字段

         json_fields: {
            姓名: "name",   
            城市: "city",
            国家: "country",
            生日:"birthdate",
            "电话 测试": "phone"    //如果命名的标题有空格,需要用双引号
          },
          json_data: [
            {
              name: "张三",
              city: "北京",
              country: "中国",
              birthdate: "1998-03-15",
              phone:"15645689652"
            },
            {
              name: "李四",
              city: "上海",
              country: "中国",
              birthdate: "1988-03-15",
              phone:"15645689652"
            }
          ]
    

    点击按钮导出EXCEL
    在这里插入图片描述

    四、使用回调获取数据及详细参数

    属性名类型描述默认值
    data数组要输出的数据
    fieldsObject声明要导出的JSON对象中的字段。就像是在制作表头 默认将导出JSON中的所有属性。
    export-fieldsObject用于解决其他组件使用可变fields的问题,exportFields的工作原理与fields完全相同
    type字符串表格类型[xls, csv]
    name 字符串文件名data.xls
    header标题表格的标题
    footer字符串页脚
    default-value字符串用于填充空置单元格‘’
    worksheet字符串表单名称‘Sheet1’
    fetch函数进行回调,以便在下载之前获取数据(如果已设置),则在按下鼠标后以及下载过程之前会立即运行。重要信息:仅在未定义数据属性的情况下有效,即不使用data参数
    before-generate函数回调以在生成/获取数据之前立即调用方法,例如:显示加载进度
    before-finish函数在下载框弹出之前进行回调以调用方法,例如:隐藏加载进度
    stringifyLongNum布尔字符串化长整数和十进制(解决数字精度丢失的问题),默认值:false
    escapeCsv布尔可以转义CSV值,以解决数字字段中的一些问题。

    按需获取数据

    <template>
      <div id="app">
     
        <hr>
        <h2>Fetch Example</h2>
        <downloadexcel
          class            = "btn"
          :fetch           = "fetchData"
          :fields          = "json_fields"
          :before-generate = "startDownload"
          :before-finish   = "finishDownload">
          Download Excel
        </downloadexcel>
      </div>
    </template>
     
    <script>
    import downloadexcel from "vue-json-excel";
    import axios from 'axios';
     
    export default {
      name: "App",
      components: {
        downloadexcel,
      },
      data(){
        return {
          json_fields: {
            'Complete name': 'name',
            'Date': 'date',
          },
        }
      }, //data
      methods:{
        async fetchData(){
          const response = await axios.get('https://holidayapi.com/v1/holidays?key=a4b2083b-1577-4acd-9408-6e529996b129&country=US&year=2017&month=09');
          console.log(response);
          return response.data.holidays;
        },
        startDownload(){
            alert('show loading');
        },
        finishDownload(){
            alert('hide loading');
        }
      }
    };
    </script>
    
    展开全文
  • vue 对后台数据(json)进行排序

    千次阅读 2020-12-28 10:45:24
    大多数情况下后端会将数据返回给我们想要的json格式,但是有些情况下可能刚开始数据没有排序,但是突然的甲方说这块数据要从大到小排序,后端改的话比较麻烦,这时候前端直接处理就快很多了,话不多说,上代码。...

    大多数情况下后端会将数据返回给我们想要的json格式,但是有些情况下可能刚开始数据没有排序,但是突然的甲方说这块数据要从大到小排序,后端改的话比较麻烦,这时候前端直接处理就快很多了,话不多说,上代码。

    data(){
            return{
                leftContent:[]													//要绑定的数据,这里是数组套对象格式
            }
    },
    mounted() {
    		this.gettyedata()
    },
    methods:{
            gettyedata(){
                request({														//这里使用封装好的axios请求方法
    				url:'请求地址',
    				method:'请求方式',
    				params:{参数名:参数值}
    			}).then(res=>{
    				if(res.status===200){
    					res.data=res.data.sort(function (a,b){		//重点在这里,下面有说明
    							return b.inNum-a.inNum;				//inNum是要根据某个字段进行排序的字段名,
    					})
    					this.leftContent=res.data
    				}else{
    					'请求失败处理'
    					}
    			})
            }
    }
    

    方便查找就这直接在这里写了:

    res.data=res.data.sort(function (a,b){						//重点在这里,下面有说明
    							return b.inNUm-a.inNum;			//inNum是要根据某个字段进行排序的字段名,
    					})
    

    其实对数据进行排序仅仅是用了js的sort()方法,如果比较着急可以直接复制代码替换相应的字段进行使用,如果想研究其原理可以看看官方的定义。
    在这里插入图片描述
    如果看不明白可以移步到w3school进行深入研究。

    展开全文
  • 这里我们用到了一个库: vue-json-excel 该库的npm地址:https://www.npmjs.com/package/vue-json-excel 一. 安装vue-json-excel npm install vue-json-excel 在main.js中导入此模块 import JsonExcel from "vue-json-...
  • VUE的过滤器的实现参考了linux的shell命令的管道的实现原理:即上一个命令的输出,是下一个命令的输入。 所以过滤器可以串接使用:{{数据 | 过滤器A | 过滤器B}} 除了在插值表达式中可以使用过滤器,在后文中将要...
  • vue-json-excel 的具体使用方法 1安装 npm install vue-json-excel -S 2在main.js中注册使用 import JsonExcel from ‘vue-json-excel’ Vue.component(‘downloadExcel’, JsonExcel); 3在页面中使用 <...
  • 转载声明:本文选自【 掘金-浪里行舟:vue组件间通信六种方式(完整版)】前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下...
  • 前言:以前将excel数据导入到数据库是通过前端,将excel文件上传到后端,通过后端语言进行相应的加工将excel文件中的数据取出并存入数据库;...Vue将excel中的数据进行提取需要js-xlsx库的支持。...
  • 关于vueJSON.parse(JSON.stringify(...))使用深拷贝问题 一般我们单独用JSON.parse()或JSON.stringify() 今天在学vue看到JSON.parse(JSON.stringify(...))的用法,这里研究一下; 首先分别说下他们的用法:  ...
  • 前端采用vue;后端采用spring,但是只用到了spring的对象注入功能,未使用spring web相关功能。前后端通信采用jsonrpc,现需要在前端选中文件(格式未知,上传到后端,后端将其存储在mongoDB中)。 背景: spring ...
  • 最近入职新的公司,整体来说还是不错的。前一阵子看了很多关于vue的知识点,自己理解着整理一下,再加深一下印象。也希望可以帮助到有需要的同学。...3、vue中的模板编译原理答:模板指的就是template。如果我们...
  • 最近使用vue-cli做了一个小小的项目,在项目中需要使用vue-resource来与后台进行数据交互,所以我使用了本地json数据来模仿后台获取数据的流程。至于vue-resource的安装和json的准备我就不赘述了、、、 下面是操作...
  • Vue2 中,如何将 .json文件作为数据源进行访问呢?
  • 在本篇文章中,主要为大家分享从vue2.x到vue3.0数据响应式的原理变化。谈到数据响应,必然绕不开数据的双向绑定,那么什么是数据的双向绑定呢? vue2.x中是通过Object.defineProperty实现数据的双向绑定的,这个方法...
  • vue中ajax发送接收json总结

    万次阅读 2018-06-01 16:12:47
    系统结构:后端:python中tornado前端:vue.js主要问题:跨域问题和json收发 1、跨域问题(python中tornado中设置):后端:1&gt;实现options方法2&gt;设置相关允许的头域 def set_default_headers(self): ...
  • 根据服务器的路由配置,返回相应信息(可以是 html 字串,也可以是 json 数据,图片等) 浏览器根据数据包的 Content-Type 来决定如何解析数据 简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的...
  • 原理:监听拦截住ajax请求,返回mock处理后的数据。 使用示例: 目录结构: 首先在index.html中引入jquery和mcok <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
  • 如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据。此时就可以使用计算属性。 例如:要对给定的字符串做翻转处理之后再来显示。 <div id="app"> <!-- 此处逻辑复杂 --&...
  • 上面已经实现了单向绑定,也就是将数据通过模板编译的原理显示在了视图上,但如图3-1所示,单向数据的改变并没有再刷新到视图上。 图3-1 因为还没有对数据做监控,监控到改变之后,执行更新视图操作。这个概念...
  • 1. vue深入响应式原理 深入响应式原理: 当视图模型(VM)中的数据模型(M)发生改变时, 视图(V)就会进行更新 Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生 改变...
  • 通过函数 syntaxHighlight 使用html标签包装json数据,并添加样式 完整范例代码 <template> <div style="width: 300px;"> <pre v-html="formattedJSON"></pre> </div> </...
  • Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便。即使是复杂的 Json数组对象,也可以使用 多层嵌套的 v-for 实现,格式如下:&lt;div v-for="(item,index) ...
  • vue中mixins使用原理详解

    千次阅读 2020-09-03 09:50:44
    混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 1.把要用的方法抽出来 写一个js 然后暴露...
  •   npm是包管理工具,初始化时会在当前文件夹下产生一个package.json文件,该文件用来描述当前项目的依赖。   可以顺序输入当前项目的名字(不能包含大写字母、中文、特殊字符)、项目的版本号、项目描述...
  • 1.4 Vue实现数据绑定的原理 // Vue 底层原理 // 目的: 使用原生js来实现Vue深入响应式 var box = document.querySelector('.box') var button = document.querySelector('button') var data = { name: ...
  • 主要介绍了vue改变对象或数组时的刷新机制的方法总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue的框架原理

    2021-03-30 11:48:31
    1、vue数据双向绑定原理 采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通 Javascript ...
  • 基于Vue.js、JSON Schema和ElementUi快速生成...JSON Schema定义了一套规范用于描述你的数据格式,包含对数据结构的描述和约束等。各种开发语言都有相应的类库实现对schema的校验支持。 一个JSON Schema的例子:...
  • import JsonExcel from "../../node_modules/vue-json-excel"; //注册组件 components: { JsonExcel, }, 在项目如何使用 //有数据,无需点击时获取 必需 data ,fields 属性 <JsonExcel :data="json_dat.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,596
精华内容 5,838
关键字:

vue处理json数据的原理

vue 订阅