- 博客(14)
- 收藏
- 关注
RSS订阅原创 vue3+elementuiplus+Sortable实现表格内容拖拽重新排序
此处我的表格是在弹窗里的，如果直接在页面上，那就在onMounted里调用nextTick()再调用setdayAdjustSort()即可。无论是在onMounted里或其他方法里，使用Sortable都需要获取表格dom，所以需要保证此时已经获取到表格dom了。1、需要给表格加唯一的key :row-key=“getRowKey”2、需要使用nextTick()确保表格dom已经加载完毕。否则可能导致拖拽后明明数据已经改了，但是页面却没有变化。这个问题找了我超久！
2023-09-21 16:35:18
1063
2
原创 vue3+elementUIplus-Table实现自定义展开且不展示默认的展开按钮
3、给表格设置row-key=“name” :expand-row-keys=“expandArr” :tree-props="{children: ‘children’, hasChildren: ‘hasChildren’}"等属性，便可通过js控制当前展开行。需求如图：每行都有两个可点击展开的列，点击后展开的内容各不相同。1、不显示默认的展开图表，给展开列设置 width=“1”2、不同列的展开数据通过if else来控制展示。
2023-05-26 14:41:12
1630
原创 react H5拖拽简单实现几个div间顺序的互换
效果图如下1、这里有几个并行的div。想实现拖拽div实现顺序的互换2、拖拽过程图3、拖拽后。成功实现顺序互换代码如下：import React from 'react';class TacheStepConfig extends React.PureComponent { state = { arr: ['一一一一一', '尔尔尔尔而', '三三三三三', '四四四四四'], srcIndex: null, // 拖拽的divIndex } // 当拖动时
2022-05-28 18:35:02
978
原创 react H5实现可拖拽的steps步骤条
先上效果图和需求说明：1、初始效果图开始节点和结束节点为固定的。中间的环节由后台返回中间的环节可拖拽修改顺序，开始和结束节点不允许拖拽——左键键选中环节不放，拖拽到步骤图上其他环节之间的【+】处放开，即可改变环节在流程图上的顺序 ——拖拽到当前环节前后【+】上，则拖拽不生效2、单击某个环节后，选中环节样式如下鼠标移入环节处，会展示允许编辑和删除的按钮开始和结束节点不会出现该按钮提示3、拖拽某个环节4、拖拽后的效果。环节的顺序已发生了变化代码如下：/* eslint-dis
2022-05-28 18:08:15
864
原创 div实现antd Descriptions描述列表（可灵活修改、固定宽度）
效果如下图：因为此处的需求需要不同的几个描述列表的label宽度位置固定。但是antd的Descriptions因为其宽度自适应原因，很难实现多个不同描述列表宽度的统一。所以这里用div重新写代码样式：.Descriptions { background: #fff; padding: 10px; .grid { width: 100%; border-right: 1px solid #E0E0E0; display: table; >div
2022-05-20 17:57:37
8034
原创 react antd tree 前端实现搜索展开并加亮关键词
大概效果如图：搜索时自动展开并加亮。antd也有大概实现该功能。但其展开逻辑有点小问题。当搜索的是子类时未进行递归寻找父级id。导致没有实现展开功能，只实现了加亮。import React, { Component } from 'react';import { connect } from 'react-redux';import { Card, Input, Spin, Tree, Icon, Modal, message } from '@whalecloud/fdx';const Se
2022-04-29 14:14:56
1759
原创 react-color颜色选择器各组件对应样式
// react-color 目前一共有13种组件:<AlphaPicker /> <BlockPicker /> <ChromePicker/> <CirclePicker /> <CompactPicker /> <GithubPicker /> <HuePicker/> <MaterialPicker /> <PhotoshopPicker /> <Sk
2022-02-22 14:10:05
1306
原创 react-color颜色选择器使用+添加点击空白关闭颜色选择器 ChromePicker
需求如下：点击“A”时打开颜色选择器，在颜色选择器上改不同颜色时，A的下标颜色也跟着修改。点击颜色选择器以外的区域时，关闭颜色选择器。import { ChromePicker } from 'react-color'; state = { keyWordColor: '#f5222d', // 结果关键词颜色 keyWordPickerVisible: false, // 结果关键词颜色选择器可见性 }; // 当结果关键词颜色版打开时，判断鼠标点击范围，点击外层时，关
2022-02-14 11:03:11
2631
原创 antd 两个DatePicker时间框实现时间动态限制
需求说明：某个查询条件的时间选择需要限定是一个月内。即如果开始时间为2021-11-17 11:11:11,则结束时间最晚只能选2021-12-17 11:11:11开始时间和结束时间相互限制本来是用RangePicker的，但是看了网上的一些方法，感觉RangePicker不能完美实现，所以这里采用两个DatePicker时间框实现最终效果：开始时间根据结束时间，日期和时刻都都有限制。因为结束时间是2021-12-17 02:02:02，所以开始时间最早不能早于2021-11-17 02
2021-11-17 13:59:18
2880
原创 ECharts tooltip不同组件分开自定义设置
需求如图，有中心一个圆饼pie和外部一个圆饼pie，我们需要在外部圆饼的数据最后添加一个百分号%，而中心的圆饼不添加百分号，而正常的tooltip是如同中心圆的展示，没有百分号的，所以，我们就需要分开设置tooltip了。话不多说，直接上代码 tooltip:{ trigger:'item', formatter:function(params){//params是自带的参数，包含触碰的数据块的所有参数 //console.log(para.
2020-12-23 14:07:48
1054
原创 react antd-mobile ImagePicker实现对上传图片的限制
目的功能：使用ImagePicker实现用户上传图片功能当用户上传图片不是jpg/jpeg/png格式时，提醒用户，不允许上传其他格式的图片当图片大于10M时，提醒用户，不允许上传图片大于10M的图片并且需要把图片数据整合后再传给后台条件可根据需求自行调整一、ImagePicker的使用 <ImagePicker files={files} onChange={this.uploadIm
2020-08-31 14:02:45
1344
原创 react antd-mobile ActionSheet+tag实现多选
实现效果如下在手机下方弹出弹窗选择月份点确定后再次点击申请月份，之前已选的月份会自动选上全部功能描述：1、点击输入框，自动弹出选择弹窗（使用actionsheet，这部分不过多阐释）2、弹窗可多选的内容由后台接口传入（或自己写数据，看需求）3、灰色部分为后台返回的不可选择的标签，不允许用户点击选择（disabled）4、选择一个或多个标签后，点击确定，保存选择的标签，并在输入框中显示选择的内容。倘若没有点击确定，直接点取消或弹框外的区域关闭弹窗，则不会保存所选标签4、再次点击输入框
2020-08-28 16:38:42
1854
原创 react antd-mobile checkbox实现全选
功能描述全选的功能应该大家都知道以月份举例，点击全选，所有月份都被选择，再次点击全选，所有月份被取消选择；当所有月份都选上时，全选按钮会自动被勾选上，当月份不被全选时，全选按钮会不被勾选。在此之前，全选的checkbox和月份的checkbox无任何关系实现过程自己遇到的难点：不知道该如何操控每个月份的checked属性，如何实现点击全选，操控所有月份checked = true解决思路：在月份数组给每个月份都设置单独的checked属性值操控详情看代码一、从后台拿到checkboxit
2020-08-28 13:45:33
1530
原创 react dva 使用mock模拟数据，添加数据的时候添加成功却报错
情况描述：在react dva里面使用mock模拟数据，再通过mock接口向mock里添加数据，结果是可以成功向mock添加数据，但在添加数据完成后报错。报错：Warning: Failed prop type: Invalid prop dataSource of type object supplied to Table, expected array.报错原因：警告：失败的属性类型：提供给“Table”的“object”类型的属性“dataSource”无效，应为“array”。因为在
2020-08-11 11:40:19
649
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人