July 2023Monthly Archives

问题来源 在实现某具有多级表头格的需求时，发现默认的单元格合并跟UI设计的不同，遂在网上寻找解决方法，于是发现了一个坑 网上的代码： <template> <el-table … :header-cell-style="setStyle" … > … </el-table> </template> <script> export default { … method: { setStyle({row, column, rowIndex, columnIndex}) { if (rowIndex === 0 && columnIndex === 0) { column.rowSpan = 2 } } } … } </script> 此时设置的rowSpan是不生效的 解决思路 因为网上搜到的代码基本都是这么写，故去看了下el-table的源码 table-header.js的render函数中相关源码如下 <th /* 此处设置了colSpan, rowSpan… Continue Reading 解决方案——el-table用header-cell-style回调设置rowSpan不生效

问题来源 由于查询条件改变频率高，或者后端数据处理逻辑复杂，导致接口返回的顺序跟实际请求的顺序不一致。 如：同一接口，先用复杂度高的查询条件发A请求，然后在A还没返回时发简单的B请求，且B返回数据后A才返回，此时若是用 *.then(res => …) 来处理的话，会出现最终使用的是A的返回数据的情况。 解决思路 由于涉及的场景不算复杂，故不打算使用类，个人选择了工厂函数的模式，考虑用两个变量分别保存当前已发送的请求数量，及当前请求的索引，分别记为A，B A初始为0，每次请求时加一，并将A赋值给该请求的索引B，请求返回时对比A和B，则： 若 A > B，说明不是我们期望的请求，在返回的数据中作标记，并在请求返回的回调函数中进一步处理 若 A = B，说明是我们应该处理的请求，将A置为0并返回原数据即可 正确的实现不应该出现 A < B 的情况 代码 /** 例如: * const fetchOptions = limitRequest() * fetchOptions({ url: 'http://www.baidu.com' }).then(res => { console.log(res) }) **/ const limitRequest = function() { const num = new… Continue Reading 解决方案——多次发送同一请求，仅响应最后一次

引入某文件夹下的所有vue组件 const requireComps = require.context('文件夹路径', true, /\.vue$/); const comps = {} requireComps.keys().forEach(name => { const comp = requireComps(name).default // 要求vue组件的$option有name属性 comps[comp.name] = comp // 注意此处comps和comp差别 }) export default { … components: { …comps } … }