开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 30 天，点击查看活动详情
将后台管理系统的订单数据导出
- 安装依赖
cnpm i vue-json-excel -S - 在
App.vue中导入JsonExecl
import JsonExecl from "vue-json-execl"
以全局组件的形式使用
App.js文件
Vue.component('downLoadExecl',JsonExecl)
JsonExecl组件参数说明：
- :data="tableData" // 要导出的数据
- :fields="json_fields" // 导出数据的配置，也就是execl文件中的头部设置
- :header="title" // 导出的标题
- name="订单.xls" // 导出的表格名字及格式
如果是所有的数据都导出，那么data里的数据就可以为tableData，如果想导出指定的数据，那么就可以先触发表单的selectChange事件，能拿到所有被选的row组成的数组，存到一个状态里，假如叫selectRow，点击"导出"按钮时，给按钮绑定点击事件，在selectRow的数据赋值给studentList，加入叫dowLoadExcel，这时候假如叫dowLoadExcel就可以作为到处去的数据。
有时候可能导出的数据有日期，那么可以使用方法，把数据改为我们想要的格式。
- 下载依赖:
cnpm i dayjs -S - 在
methods里顶层写一下dayjs，相当于注册一下。 - 在方法里就可以调用
dayjs(要转化的数据).format(YYY-MM-DD HH:mm:ss)
useState的实现原理
- 我们可以试想一下，如果函数式组件里没有
useState，我们定义状态应该定义在哪？ - 我猜：有的人会说直接定义为一个变量，做交互事件的时候也会发生改变，发生改变没错，但是组件不会更新渲染；也有人收定义在组件外面，定义为全局的，可以是定义为全局的又会污染全局变量，不会被垃圾回收机制进行回收，一直保存在内存中，导致内存泄漏；还有人说放在
redux中，也是可以的。但是我们放在useState中是最好的。 - 它的原理就是把组件的每个状态都放在了
fiber对象上。 - 每一个组件都有一个
fiber对象，它可以用来保存组件的相关信息，在fiber身上有一个memorizedState属性，这个属性里存放着第一个状态hooks，然后这点.next(hooks1)会指向下一个hooks，他们是连起来的，这也是为什么hooks不能用在if和嵌套语句的原因，那样的话会破坏链表结构。 fiber.memorizedState(hook0).next(hook1).next(hook2).......
