- 博客(61)
- 收藏
- 关注
RSS订阅原创 el-table 结合 slot 具名插槽遍历封装列表模板
父组件添加特殊样式如果想为某些列添加特殊样式，可以在 columns 中添加特殊参数比如为金额列添加颜色，大于 0 的显示绿色，否则显示红色比如添加操作列并回传点击事件父组件点击表格第一行的按钮1时，可以看到，父组件可以接收到传递的参数利用具名插槽如果 reset 标记不够满足父组件中的定制化样式，还可以利用具名插槽比如为姓名列添加文本内容比如截取日期格式可以将 columns 数组中的 prop 属性作为具名插槽的 name 来使用模板组件
2025-02-18 15:50:25
863
原创 使用 flex 简单实现 table 自适应页面
当页面整体宽度较小，顶部搜索模块高度自动撑开时，table 宽度动态变小，只展示 4 行数据。当页面整体宽度较大，顶部搜索模块没那么高，table 高度自动变大，展示 7 行数据。保证页面其他模块宽度高度自适应，动态改变中部 table 的高度。
2024-10-31 16:46:58
489
原创 利用数组的 reduce 方法，整合对象数组，合并属性
效果存在两个对象数组针对属性 date 对两个对象数组进行合并效果如下代码利用 mockjs 模拟数据请求，通过 getList1 和 getList2 分别请求回来两个数组的数据利用 Promise.all 方法等待两个接口请求完成后，进行数据处理利用 concat 方法对两个数组数据进行拼接利用 sort 方法对合并后的数组进行排序，排序顺序为日期升序利用 reduce 方法生成新数组，针对 date 进行合并，并且根据不同的组别 group 分到不同的数组中处理后的数组格式
2024-10-30 11:43:38
1081
原创 table 常见属性及跨行跨列
table 常用属性width - 宽度传值为百分比或具体尺寸表格横向内容默认为弹性布局如图设置宽度为 400 (默认绘制成 400px)如图设置为 80%height - 高度传值为百分比 (从父元素继承) 或具体尺寸除去 thead 部分，剩余高度默认弹性布局如图为 thead 部分添加背景色，可看出整体 table 高度为 height 设置的值，剩余部分由 tbody 部分占用border - 边框表格及单元格的边框如图设置边框为 1cellspa
2024-03-11 16:38:18
2585
原创 利用圆锥渐变属性 conic-gradient() 实现仪表盘进度条效果
【代码】利用圆锥渐变属性 conic-gradient() 实现仪表盘进度条效果。
2024-02-29 14:57:42
597
原创 keep-alive 的简单使用
vue-router 的嵌套与模块化router 实例中增加 children 属性，形成层级效果。App.vue 中的 router-view 承载的是 router 实例最外层的路由对象，如 /login、/404 等PageHome.vue 中的 router-view 承载的是 children 中的路由对象，如 /home、/userList、/dataList 等为了使阅读方便，使用方便，可以将 router 实例进行模块化分解，将不同功能模块的路由抽离到不同文件中。如上所示，
2024-02-18 17:27:29
291
原创 bug 记录 - 接口被重复调用，响应时长不同，结果被覆盖的问题
【代码】bug 记录 - 接口被重复调用，响应时长不同，结果被覆盖的问题。
2023-06-02 10:05:04
1113
1
原创 scrollIntoView 的使用
描述将调用此方法的元素滚动到浏览器窗口的可见区域。scrollIntoView 官方文档用法element.scrollIntoView()用法同 element.scrollIntoView(true)element.scrollIntoView(alignToTop)true 表示 element 元素顶部与可见区域的顶部对齐，默认值false 表示 element 元素底部与可见区域的底部对齐element.scrollIntoView(scrollIntoVi
2023-05-11 16:26:29
2262
原创 el-cascader 级联选择器懒加载的使用及回显 + 点击任意一级都能返回
el-cascader 级联选择器懒加载的使用及回显 + 点击任意一级都能返回
2023-02-24 17:15:00
5176
4
原创 数组常用方法总结 (7) ：copyWithin / fill / reduce / reduceRight
数组常用方法总结 (7) ：copyWithin / fill / reduce / reduceRight
2023-01-17 14:00:00
420
原创 数组常用方法总结 (6) ：includes / indexOf / lastIndexOf / valueOf / toString / isArray
数组常用方法总结 (6) ：includes / indexOf / lastIndexOf / valueOf / toString / isArray
2023-01-16 14:00:00
635
原创 数组常用方法总结 (5) ：find / findIndex / filter
数组常用方法总结 (5) ：find / findIndex / filter
2023-01-13 14:00:00
1352
原创 数组常用方法总结 (3) ：map / forEach / every / some
数组常用方法总结 (3) ：map / forEach / every / some
2023-01-11 14:00:00
295
原创 数组常用方法总结 (2) ：sort / join / reverse / concat
数组常用方法总结 (2) ：sort / join / reverse / concat
2023-01-10 14:00:00
428
原创 数组常用方法总结 (1) ：pop / push / shift / unshift
数组常用方法总结 (1) ：pop / push / shift / unshift
2023-01-09 14:00:00
1024
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人