随笔档案「2020年6月」 - liumcb

同级结构怎么重新组装为树形结构

摘要：如果后台给了一个同级结构的数据，需要前端将代码给重构成树形(tree)结果，应该怎样写？例如，后台给了一个这样的格式 [ { "checked": null, "id": 1, "level": null, "name": "超级管理员","num": null, "open": true,"pI 阅读全文

posted @ 2020-06-16 14:47 liumcb 阅读(406) 评论(0) 推荐(0)

vue：设置全局函数以及调用函数

摘要：1、定义一个全局函数文件common.js，并定义全局函数 const token = '123456' // 根据code得到name const getNameByCode = (code, list, codeProperty, nameProperty) => { let name = '' 阅读全文

posted @ 2020-06-15 18:53 liumcb 阅读(7537) 评论(0) 推荐(1)

vue：怎么在mutations里面写递归函数

摘要：恢复内容开始我在使用elements-ui的时候，用到了<el-cascader>级联选择器，数据格式按要求是 value和lable，我用的是以前的接口，以前数据给的是id和name，不能修改数据参数，所以需要自己给重新组装一下数据格式。因为数据里面有几层函数（不确定），所以最好的方法就是递归阅读全文

posted @ 2020-06-12 17:17 liumcb 阅读(1242) 评论(0) 推荐(0)

element-ui： template模板里面的scope

摘要：在使用element-ui的时候，经常见有插入 template slot-scope="scope" <template slot-scope="scope"> <span v-else>{{scope.row[scope.column.property]}}</span> </template> 阅读全文

posted @ 2020-06-11 16:45 liumcb 阅读(3430) 评论(0) 推荐(0)

element-ui：table循环列表时怎么匹配后台给的字段

摘要：在使用element-ui的table的时候，后台返回的字段比如性别，返回sex:0，需要前端展示的时候自己匹配为汉字，展示方法有2种：方法一： <el-table-column prop="sex" :formatter="formatter" align="left" show-overflo 阅读全文

posted @ 2020-06-11 16:39 liumcb 阅读(1228) 评论(0) 推荐(0)

element-ui：table自定义列宽和设置百分比宽度

摘要：今天在使用element-ui创建列表的时候，有一个小坑，就是循环列表的时候怎么自定义列表宽度： 1、先自定义表头的columns data() { return { columns: [ { id: "menuName", text: "菜单名称", prop: "menuName", width 阅读全文

posted @ 2020-06-11 11:34 liumcb 阅读(21467) 评论(0) 推荐(1)

react-redux

摘要：我一直使用的框架就是react，随之搭配的状态管理是react-redux。最近在研究vue以及vuex。框架我就不多记录，主要记录一下状态管理的区别点： redux：大概的过程：当一个页面渲染完后，UI出现，用户其实是触发了UI上的一些Action，Action将会被送到Reducers方法里，阅读全文

posted @ 2020-06-10 17:52 liumcb 阅读(166) 评论(0) 推荐(0)

vuex有5大属性

摘要：最近研究vuex，感觉有点懵懵的，现在记录一下自己这几天学习心得： vuex有5大属性：state, getters, mutations, actions, modules 1、state：初始化定义。 2、getter：store 中的 state 中派生出一些状态，可以认为是 store 的计阅读全文

posted @ 2020-06-10 17:38 liumcb 阅读(1065) 评论(0) 推荐(0)

vuex-mapActions报错unknown action type: incrementAction

摘要：在使用mapActions的时候，今天一直报错，之后发现是看代码不认真的问题，现在记录一下。在使用module的时候，已经定义了namespaced:true 错误使用方法：报错信息正确使用方法：home为文件夹名阅读全文

posted @ 2020-06-09 16:31 liumcb 阅读(747) 评论(0) 推荐(0)

vue.js - mapGetters报错unknown getter一直获取不到值的问题？

摘要：最近在研究使用vue，当用到了vuex的时候，一直在踩坑，现在记录一下防止以后忘记。 vuex中，使用mapGetters一直获取不到的问题？我使用了module组件，最开始的时候是直接在module里面直接定义getter，之后输出。在home.vue页面中使用...mapGetters([' 阅读全文

posted @ 2020-06-09 15:09 liumcb 阅读(9803) 评论(1) 推荐(1)

webpack-优化

摘要：在webpack打包的时候，打包的速度和大小会随着项目的增大而变化，为了更优化项目，可以通过webpack来进行优化。 1、devtool ：调试不同的调试方式的大小和速度不同，可以开发和生产用不同的调试方式 2、UglifyJSPlugin： js压缩插件，可以压缩打包的js大小 3、babe 阅读全文

posted @ 2020-06-05 13:33 liumcb 阅读(139) 评论(0) 推荐(0)

webpack构建流程

摘要：日常经常说webpack打包，但是webpack打包的流程是什么，我一般没有关注过。现在大概记录一下打包流程： 1 初始化参数：解析webpack配置参数，合并shell传入和webpack.config.js文件配置的参数，形成最后的配置结果； 2 开始编译：上一步得到的参数初始化compiler 阅读全文

posted @ 2020-06-05 13:12 liumcb 阅读(608) 评论(0) 推荐(0)

webpack-loader

摘要：在使用webpack的时候，总是要首先安装loader，但是为什么要安装loader？以及都有哪些类型的loader？ 1、为什么要使用loader？ webpack 自身只理解 JavaScript（js结尾的文件），loader 让 webpack 能够去处理那些非 JavaScript 文件。阅读全文

posted @ 2020-06-05 10:38 liumcb 阅读(154) 评论(0) 推荐(0)

antd- DatePicker中-禁用时间

摘要：antd-的DatePicker是很好使用的一个时间组件，但是需要根据需求的变化进行一些改变，例如禁用时间，国际化等。 1、禁用时间：DatePicker中-禁用时间 handleData(time){ if(!time){ return false }else{ // 大于当前日期不能选 tim 阅读全文

posted @ 2020-06-04 14:52 liumcb 阅读(3673) 评论(0) 推荐(0)

antd-table列表数据未刷新的问题

摘要：使用Table和Form表单的时候，有时候会遇到一种场景，就是修改本条数据并刷新列表：例如：更新第一条数据，修改供应商的名称，点击更新按钮，后台返回正确的也是自己输入的数据，但是页面仍然显示之前的内容。原因：Table组件的key值不变的时候，是不会刷新页面的，比如原来的key为0，更新之后，得阅读全文

posted @ 2020-06-04 14:45 liumcb 阅读(16804) 评论(0) 推荐(0)

antd-修改样式

摘要：antd有一套自己的样式，但是根据工作情景，有时需要重新定义antd的样式： 1、修改页面的input的下边框 :global(html:not([data-scale]) .am-list-item:not(:last-child) .am-list-line::after){ backgroun 阅读全文

posted @ 2020-06-04 14:37 liumcb 阅读(3698) 评论(0) 推荐(0)

antd-样式不起作用

摘要：安装antd-design的时候，发现antd的样式都没有，经过查找发现是没有添加antd给的css，这个需要自己手动添加css 阅读全文

posted @ 2020-06-04 14:29 liumcb 阅读(1984) 评论(0) 推荐(0)

antd - Table列表中有时会添加一条新纪录时怎么拿到列表中的数据

摘要：在进行Table列表和Form表单混合使用的时候，有时候有添加按钮，每次新添一条table列表，之后提交的时候拿到所有table列表中的值，此时应该怎么使用？先定义一个暂存action构造函数，为了后面数据可以进行暂存修改。 1、首先当获取这个table列表的时候，给每一条数据添加一个key值，可阅读全文

posted @ 2020-06-04 14:27 liumcb 阅读(1478) 评论(0) 推荐(0)

antd -- CheckBox不使用CheckboxGroup联动，可以联动的处理

摘要：我们使用CheckBox的时候，对于有一组数据的时候通常使用CheckboxGroup进行联动处理，但是有时没办法使用组件里面的联动。例如：在Table组件中，含有CheckBox，但是又没办法使用联动的情况，应该怎么处理呢？？？勾选下面的勾选框，来联动控制上面的全选，这个没办法直接使用Chec 阅读全文

posted @ 2020-06-04 13:51 liumcb 阅读(2651) 评论(0) 推荐(0)

antd -- Form和Modal弹出提示框，默认值不动态变换的问题

摘要：antd中的Modal对话框可以跟Form表单组合使用。在利用Modal和Form表单弹出提示框的时候，在修改Form表单数据的时候，修改某些值之后不提交，而是直接关闭Modal框，则下一个提示框中的Form数据仍是上一个修改的情况。当修改代扣渠道为农行接口，但是没有提交到后台，而是直接关闭M 阅读全文

posted @ 2020-06-04 13:07 liumcb 阅读(3305) 评论(1) 推荐(0)

antd-Table合并单元格

摘要：在做项目的过程中，经常会用到table，antd有一个很好用的组件<Table />基本我能用到的功能在里面都可以实现。我在工作过程中会遇到合并单元格的问题，我把合并的给封装了一个小的功能，可以直接使用。功能如下图： antd中合并单元格有两个属性： rowSpan: 合并列单元格 colSpa 阅读全文

posted @ 2020-06-04 11:48 liumcb 阅读(8448) 评论(1) 推荐(1)