随笔分类 -  那些年封装过的组件

echats根据下拉选数据调用接口获取图表数据
摘要：有个图表需要根据当前选择的选项展示不同的数据，效果如果图： 左边的图表要根据右边的下拉选获取对应接口数据。 算了直接放代码吧： <template> <div class="transaction-chart-comp"> <div class="tc-title chart-box-title"> 阅读全文
posted @ 2022-06-24 17:23 俄罗斯方块 阅读(191) 评论(0) 推荐(0) 编辑
vue之封装一个用来展示状态用的组件
摘要：table等其他地方可能需要根据某个字段的值展示不同的状态，但是状态比较多的话却是需要很多的判断或者繁杂的三目判断，所以封装了一个用来展示的组件： 样式如图： 代码如下： <template> <div> <span> <span v-for="item in option" :key="item. 阅读全文
posted @ 2022-06-24 17:11 俄罗斯方块 阅读(239) 评论(0) 推荐(0) 编辑
封装一个element-ui表头可以用来手动筛选的筛选组件
摘要：element-ui的table组件有筛选功能，可以通过关键词筛选指定条件的当前页的数据： 但是，我的需求是要在点击筛选时还要调用接口获取所有数据，看了下table组件自带的filter-method属性，它的实现原理就是遍历所有的当前页的数据，通过回调函数的形式判断当前行的数据是否和筛选条件一致， 阅读全文
posted @ 2022-06-24 16:43 俄罗斯方块 阅读(1474) 评论(0) 推荐(0) 编辑
vue+element之一个table为载体的穿梭框
摘要：有个类似穿梭框的弹窗需求，看了下element-ui的Transfer组件，和原型查了很多。所以自己写了一个，原型图如下： 估计也没人看，直接放源码防止以后遇到同样需求： <template> <div class="select-people"> <div class="left"> <div c 阅读全文
posted @ 2022-06-24 15:57 俄罗斯方块 阅读(1083) 评论(1) 推荐(0) 编辑
vue3 封装仿antd-vue的Table组件基本实现
摘要：最近需要在不使用UI框架的情况下封装一个简单的表格，由于对antd-vue比较熟悉，所以仿照了antd-vue的样子写了个简化版的Table组件。 使用技术：VUE3、SCSS 用过antd-vue的都应该知道table组件主要的传参是两个：columns和dataSource，分别对应表头信息和表 阅读全文
posted @ 2022-06-20 08:51 俄罗斯方块 阅读(955) 评论(0) 推荐(0) 编辑
vue3+element-plus如何做一个动态增删同时具有校验功能的table表格
摘要：项目中有个比较麻烦的需求： 一个表格： 能手动向表格第一行增加一行 每一行的每一列在点击某一格时要能输入 每个表单控件需要有校验功能 支持多选 可以删除所选行 保存后需要前端做一个仅前端部分的查询 原型如下： 上面这些要求看起来就很麻烦。但是更麻烦的是，这个原型还是修改过的，原来的原型已经实现功能了 阅读全文
posted @ 2022-06-20 08:50 俄罗斯方块 阅读(1064) 评论(0) 推荐(1) 编辑

点击右上角即可分享
微信分享提示