买个床-CSDN博客

原创 vue3 ts table合计样式更改

【代码】vue3 ts table合计样式更改。

2024-04-24 13:59:19 216 1

原创 echarts 实现线图上面区分不同的圆点

【代码】echarts 实现线图上面区分不同的圆点。

2023-12-27 17:32:43 432

tooltip: {},legend: {data: [{name:'1',},},],},grid: {},xAxis: {axisLine:{},},margin:20,},axisTick:{},yAxis:[},},axisLine:{},},min: 0,max: 100,},},axisLine:{},] ,series: [name: '1',},name: '2',},name: '3',stack: '总量',

2023-11-22 17:01:08 113

原创 vue3.0 dragula 看板功能实现

1、dragula 安装导入一直报错，直接require进来的，css是直接加在了vue文件的最后面。2、v-for 加载ref，导致新增的列表无法让元素拖动。3.列表拖动时，列表需要交换位置。

2023-07-07 10:05:07 1152

原创 vue3 echarts tooltips axis失效问题

【代码】vue3 echarts tooltips axis失效问题。

2023-05-11 15:56:23 339

原创 vue3.0 ts table表格合并功能，搜索功能，搜索高亮功能，针对特殊数据进行样式特殊处理功能

效果如下：拿到的数据如下图需要对数据进行处理处理数据之后，对数据进行表格合并处理快速搜索功能代码：

2022-06-08 15:26:28 839

原创 vue3.0导出excel带格式

这个真的困扰了我整整一天，我尝试了xlxs file-saver两个组件的版本，怎么搞都不行先不说vue3.0 不能import进来，只能require(‘xlxs’),require(‘file-saver’)把这两个插件引入是能导出excel的，但是不支持更改样式；写法如下： function exportFun() { const time = new Date().getTime(); var XLSX = require("xlsx"); let nam

2022-05-25 17:53:38 1614

原创 vue test devlopment production三个环境对应的链接更改

在package.json 文件里 "scripts": { "start": "vue-cli-service --mode test serve", // 本地跑时对应test环境 "serve": "vue-cli-service --mode test serve", "build:uat": "vue-cli-service --mode development build",// 打包测试环境时，对应development环境 "build": "vue-c

2022-04-29 16:04:20 215

原创 vue3.0 ts 实现拿到后台数据，数字增加动效

vue template 代码： <el-row > <el-col :span="8" > <p>今日数量：</p> <span ref="todayRef" ></span> </el-col> <el-col :span="8">

2021-09-08 15:30:25 1239

原创 vue3.0+ts table新增删除行和某一元素可输入

#default=“scope"与#default=”{row}"的区分，scope作用域插槽表头：setup(){ // 声明响应性变量 const state = reactive<any>({ tableData:[], }) const column = [ { label: "名称", prop: "BONDNAME", align: "center", width:

2021-08-18 17:10:48 1986

原创 vue3.0 用iframe嵌入react项目

公司项目要求把之前react项目嵌入到vue3.0项目中，想了好久iframe是一种解决方案需求：在vue3.0项目中菜单点击时，打开react项目中的一个页面，react页面内部跳转的时候通知vue3.0，打开一个tab（互相通信）需要注意：keepalive不缓存iframe 需要找另一个解决方案，把iframe写在route之外app.vue<el-main id="app"> <router-view ref="pageRef"

2021-08-18 14:24:43 1961

原创 js 打印某一区域div，新开页面，保留样式

// 项目用的ts，如果不是用ts 变量正常命名就行 const newWindow:any = window.open("打印窗口","_blank") const printhtml:any = window.document.getElementById('printid'); if(newWindow.document.readyState=="complete"){ const stylArr:Array<any&gt.

2021-07-28 16:48:48 1003

原创 antd tree组件，搜索并定位，实现已被其他数据关联的情况不允许被再次关联

实现的效果如下图：实现搜索定位：搜索用的官方提供的代码，在搜索框监听到数据变化的时候，找到相关数据并高亮因为该页面有两个tree，所以我写在了一个方法里面，根据传参不同来区别写法应该是根据传参来设置state，但是由于需求更改频繁所以没做改动应该正确的写法是：获取数据：const list = this.state[${str}Datalist];设置数据：this.setState({[${str}expandedKeys]: expandedKeys,[${str}autoExpand

2021-03-23 09:43:54 1031

原创 vue 监听数据变化渲染之后获取元素

watch 监听数据变化如：因为之前的人有引入jQuery ，后面查询资料发现用refs可以获取jQuery获取如下：watch:{ expandedRowKeys:function(){ this.$nextTick(function(){ //方法 //let timer = null; //timer = setTimeout(function(){ // console.log('---------',

2021-01-28 16:36:17 383

原创 echart tooltip 跟随鼠标，鼠标在左半部分时靠右，反之

tooltip: { trigger: 'axis', position(pos, params, el, elRect, size) { const obj = { top: 10 }; // 鼠标在canvas左侧 if (pos[0] < size.viewSize[0] / 2) { obj.left = pos[0]; } else {

2020-12-21 13:32:49 900 1

原创 antd + react-grid-layout 所见即所得

先安装 react-grid-layoutnpm install react-grid-layout首先从服务器去拿数据，是否有保存的面板方案，如果没有就使用默认面板（可以自己保存默认面板方案），默认面板方案也是从服务器获取,取到数据之后渲染我没有把单个面板写活，只是暂时对每个面板定了一个唯一的ii----是指面板的名称h—是面板的高度w—是面板的宽度x—是面板的坐标 x轴y—是面板的坐标 y轴这些是react-grid-layout渲染所需要的值第一步：取数据–保存到state中的wi

2020-11-20 14:33:09 1930

原创 vue bootstraptable 固定列实现方式以及固定列影响的checkbox功能修复

实现固定列就两行fixedColumns: true,//固定列fixedNumber:2,//固定前两列 $("#table").bootstrapTable({ classes:'table table-bordered', url:url, method:"POST", data:params, search: false, showColumns: true, reorderableCo

2020-10-26 16:56:18 796

原创 js修改复制粘贴板上的内容（从网页复制表格的时候多复制了一行）

//在didmount生命周期里监听复制事件 componentDidMount() { window.document.addEventListener("copy", this.copy); } copy = (oEvent) => { let copyInfo = ""; //获取复制信息 try { copyInfo = document.selection.createRange().text; } catch (ex).

2020-10-13 15:53:15 768

原创复制粘贴到textarea，根据空格划分为表格列，\n划分为表格行

handleCopy = (e) => { let value = e.target.value; //用来渲染table用的copyArr let copyArr = []; //根据\n换行 let rows = value.split("\n"); rows.forEach(function (item, index) { //根据空格换列

2020-10-13 15:48:39 353

原创 react 路由的两种传值方式

项目需要，之前的显性传值改为隐性传值: //显性传值 router.push( pathname:`/bondApproval?id=${id}&type=haveTodo&title=标题`); //隐性传值 const path = { pathname: '/approval', state: { type: 'haveTodo', id,

2020-08-03 16:42:06 231

原创 antd+umi 嵌套路由_layout.js及antd tabs menus共同使用，实现点击菜单打开一个tabs页面并跳转路由，需要keep-alive实现数据缓存

需求比较复杂，但是也比较合理吧，网页里面的系统把左侧菜单放一个component里面：具体有关menu的误操作，上一篇有记录把menu里面的点击的内容（activeKey，openKeys【这个我没放，根据当前路径去对比数据找到当前展开的menu】，当前的menu的url，key，name，因为tabs需要用到）都记录到状态机里，也就是redux一类的数据：export default { dashboard: { url: '/dashboard', n

2020-07-09 11:16:59 2841

原创 antd 二级菜单不跟随主菜单收起，文字还显示的问题

感谢，跟我一样遇到这个问题的靠谱大哥https://blog.csdn.net/weixin_44180427/article/details/103124890奈斯啊我把我全部代码贴上好了，问题解决在上面的链接，记录我的代码 //递归渲染子菜单 renderChildMenu = (currMenu, urlList = '') => { return Object.keys(currMenu.children).map(childkey => { con

2020-07-06 17:30:16 1641

原创用css3实现波浪效果

body { position: relative; align-items: center; min-height: 100vh; background-color: rgb(118, 218, 255); overflow: hidden; } body:before, body:after { content: ""; position: absolute; left: 50%; ..

2020-06-22 10:43:10 196

原创 css中的单位

1.px像素来自百度知道：PX是Pixel的缩写，就是说像素是指基本原色素及其灰度的基本编码，由 Picture(图像) 和 Element（元素）这两个单词的字母所组成的，如同摄影的相片一样，数码影像也具有连续性的浓淡阶调。2.em相对单位，相对于父元素，当父元素font-size为16px时，1em=16px，0.8em = 12.8em,不是静止的，随着父元素的变化而变化3.rem相对单位，相对于根元素，r(root) 相对于html定义的单位，变化只根据根元素决定相对单一，适合用于网格布局

2020-06-19 17:23:48 330

原创 ant design table 可编辑值，当获取值之后，select值刷新不到的问题，以及设置单个单元格禁用或者可用

一“”设置单个单元格禁用或者可用：getFieldDecorator 此方法的rule没有设置disabled的规则，所以对单个设置禁用似乎有点无能为力，他的具体的API：具体：https://blog.csdn.net/XUAN_1995/article/details/84582465属性说明类型默认值getValueFromEvent 指定如何从事件中获取值，可以把 onChange 的参数（如 event）转化为控件的值 function(…args) initialValue 子

2020-06-19 16:13:02 1411

原创 bootstrap-table那些我遇到的问题

接手的项目 vue+bootstrap-table因为时间问题，需求从展开折叠表格临时改成了，用行与行颜色区分每一项async loadlist(data){ this.data = []; //用来存储需要合并的单元格的位置 var splitArr = []; let count = 0; const result = await this.post(url,params); var resdata = result.data; for(var index in resdata){

2020-06-12 16:40:07 237

原创 vue 封一个提示框

根据传入参数为error或者success，显示警告框或者是成功提示框component：<template>  <div class="toast-box"> <div v-if="isSuccess" > <div v-show="visible" class="alert alert-success toast-alert">{{message}}</div> </d

2020-06-09 17:33:02 182

原创 vue 封装get 和post请求

get 和post请求的参数传法不一样，要注意 Vue.prototype.post = function (url, param, callback) { return new Promise((resolve, reject) => { var sessionid = localStorage.getItem('sessionid'); Vue.http.post(url, param, { headers: { Authorization: sessionid },

2020-06-09 16:39:49 2113

原创 vue-pagination-2 使用

接手的项目用的vue+bootstrap，但是所有内容都没有做分页也是无语得一批，一个后台管理系统，全都是表格数据，为啥没有分页不是很懂，不吐槽了。先安装npm install vue-pagination-2在main.js 注入全局组件import Pagination from 'vue-pagination-2'Vue.component('pagination', Pagination)然后就可以在页面上写了，在data里写上必须的一些属性data(){ return{

2020-06-02 09:05:16 1325 9

原创 VUE 等数据加载之后再执行某些操作

由于上个前端没写路由，只是写了个菜单栏，刷新的时候需要定位到当前页而不是每次回到首页解决：存储状态，刷新之前记录当前是哪个页面用sessionStorage保存而菜单是动态获取的，拿到菜单模拟点击事件，就可以定位到当前保存的页面了判断对象数组中是否有某个属性：（参考https://blog.csdn.net/csu_passer/article/details/86504103）第二种没有尝试常规arr.filter(item => item.x===x).length !== 0黑科技

2020-05-27 16:46:12 2466

原创 web安全

1.CIA三元：机密性Confidentiality，机密性是防止未授权的用户访问数据完整性Integrity，完整性是防止未授权的修改数据可用性Availability，保证经过授权的客户能及时准确的不间断的访问数据两大攻击2. XSS攻击：黑客可以在网页插入一段恶意的js代码，窃取私人信息，冒充用户身份做一些操作，这就是XSS攻击（跨站脚本攻击），浏览器无法区分是恶意还是正常的操作都会执行，XSS攻击的类型：1）反射型：恶意js脚本属于用户向服务器发送请求的一部分，随后服务器会向用户返回这

2020-05-26 14:38:02 199

原创快速排序

https://www.zhihu.com/question/276746146emmm，18年的才知道。。阮一峰老师实现：var quickSort = function(arr) {　　if (arr.length <= 1) { return arr; }　　var pivotIndex = Math.floor(arr.length / 2)　　var pivot = arr.splice(pivotIndex, 1)[0];　　var left = [];　　var righ

2020-05-25 14:44:50 70

原创判断数组是否重复，以及遇到的一个比较坑的问题

isRepeat = (arr, str) => { let hash = {}; for (let i in arr) { if (hash[arr[i]]) { message.error("第" + (Number(i) + 1) + `行${str}，请确认后重新导入`); this.setState({ isFalseData: true }) ...

2020-05-19 16:08:37 555

原创 react ant design编辑行引入日期格式

需求是点击编辑，整个一行需要能编辑，有三个是日期选择格式的因为用的版本是3.x版本，所以我把整个官方给的文档拷贝了，融合自己的其他功能的代码，其中日期格式的如下：虽然丑陋了些，但是实现了功能const data = [];const EditableContext = React.createContext();/** * 给列添加input 和日期格式 */class EditableCell extends React.Component { getInput = (value

2020-05-19 13:54:34 569

原创 react ant-design table 显示数据以及上传数据显示到另一列中

需求是：用table展示数据，并在每一行的最后一列中给一个上传附件的按钮，可上传多个附件，上传之后在另一列去显示数据，可以删除附件因为有别的组件用到columns，他不需要上传附件功能，我就把columns的公共部分提出去了，在这个组件需要的时候在push到column中。columns如下： /** * 处理上传附件列 */ handleColumn = () => { let cArr = this.state.columns;

2020-05-14 16:41:44 877

原创 react 生命周期

浏览代码时留意到react的两个生命周期函数componentDidMount，componentDidUpdate，于是又去搜索各大技术网站的资料想彻底弄明白react 的生命周期。图片来源：https://juejin.im/post/5a062fb551882535cd4a4ce3一直只知道react生命周期分为三个阶段，挂载，运行，销毁，不清楚每个函数之间能做些什么事情componentWillMount：组件将要挂载，只调用一次，在初始化渲染之前立即执行。可以执行定时器和服务器获取数据的任

2020-05-11 14:41:02 216

空空如也

空空如也