IT1995的博客

在这个示例中，使用了computed属性getCurrentPageData来根据当前页和每页显示条数来计算当前页面应该显示的数据。在分页变化时，我们通过handleCurrentChange方法来更新当前页数。这种方式可以在前端进行数据的分页展示。对于 Element UI 表格的前端分页，可以在组件中使用 JavaScript 来实现数据的分页显示，而不必从后端获取已分页的数据。

在这个示例中，在 created 生命周期钩子中添加了窗口大小改变事件的监听器，并在 beforeDestroy 钩子中移除了监听器，以避免内存泄漏。当窗口大小改变时，handleResize 方法会被调用，重新计算表格的高度并更新视图。当窗口大小改变时，你监听 window 对象的 resize 事件，然后在事件处理程序中重新计算表格的高度。在 Vue 中，可以在组件中通过 created 生命周期钩子来添加事件监听器，然后在组件销毁时移除事件监听器。

主要是公司对前端要求不高，能解决问题就行了，前端不太熟，用js这种处理起来方便，在此记录下。在src中创建一个api目录，新建custom.js。在对应的vue中导入，然后就可以直接调用了。

在Vue中，可以使用this关键字来访问到组件中定义的变量。然而，在axios的then函数中，this关键字的作用域会改变，会指向axios对象本身而不是Vue组件实例。使用箭头函数的好处是不需要额外保存this关键字的值，直接在then函数中使用this关键字来访问Vue组件的变量即可。解决这个问题的一种方法是将Vue组件中定义的变量保存到一个变量中，然后在axios的then函数中使用该变量。另外，也可以使用箭头函数来解决this关键字作用域的问题，因为箭头函数会继承父级作用域的this值。

结构是这样的：在项目里面新建.env.dev文件内容如下：NODE_ENV=developmentVUE_APP_SERVER=http://127.0.0.1:8880VUE_APP_WS_SERVER=ws://127.0.0.1:8880修改package.json最后在main.js中修改axios的baseURLimport { createApp } from 'vue'import App from './App.vue'import Antd from

运行结果如下：程序结构如下：关键代码：App.vue<template> <a-layout class="layout"> <a-layout-header> <a-menu theme="dark" mode="horizontal" v-model:selectedKeys="selectedKeys"

这里文档要这样看：这里npm install [email protected] -savenpm install [email protected] --save在main.js中添加antd.css及Antdimport { createApp } from 'vue'import App from './App.vue'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css'

安装10版本以上的node安装完后：node -vnpm -vnpm get registrynpm config set registry http://registry.npm.taobao.orgnpm install -g @vue/[email protected] --version就可以了

效果是这样的：这里就记录下操作添加一个CSS如下： a.TestCSS{ -webkit-line-clamp: 1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; white-space: normal; }将这个css添加到即可！...

效果是这样的：这里的文章标题和查看都可以进行跳转。其中对应的代码如下： <template style="height: 100%"> <el-table :data="this.tableDataList" height="95%" style="width: 100%" :row-style="iRowStyle" :cell-style="iCellStyle"

效果是这样的：此处是使用echarts加载geo地图。这里简单说下逻辑：首先npm下个包：npm install echarts然后用个vue组件封装下。如下代码：<template> <div id="leftDownGeoGra" style="width: 100%;height: 100%"></div></template><script> import 'echarts/map/js/c

官方效果是这样的：此处改成了这样的效果：此处是可以进行滑动的，就是去除了滑动条，仍能滑动的效果。下面说下修改样式，找到使用el-table的vue组建：在style中贴上：<style> table-wrapper /deep/ .el-table--fit{ padding: 20px !important; border: none !important; } .table-wrapper .el-table, .el-tab

这里主要是针对vis的network图进行节点动态添加图用的是vis.js，表单使用的是element-ui程序运行截图如下：添加一个节点：这里是不需要刷新页面就能添加的。程序结构如下：关键源码如下：FormGroup.vue<template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" cla..

程序运行截图如下：首先要用npm导入的vis包npm run vis程序结构如下：源码如下：HelloWorld.vue<template> <div id="networkDemo" style="width:800px; height: 600px"> </div></template><script> import {createNode} from 'JS/visTest.js'e

这里主要实现的目标是实现当分辨率低了就隐藏，达到某个分辨率后就显示。如下：正常情况：当页面变小后：关键代码如下：@media (max-height: 600px) { .fas{display: none!important;}}@media (max-width: 300px) { .fas{display: none!important;}}当max-height小于600px时fas的display值为none。当max-width小于300

主要是在界面上，如果点击个弹窗，再弹窗中，还需要弹出一个框，进行输入查询。目前此笔记就记录了这个！程序运行截图如下：点击弹窗：点击查询,第二层窗口弹出，输入数据：点击确定并退出，即可：程序结构如下：源码如下：Dialog.vue<template> <div> <el-button type="text...

目录Linux中Nginx安装vue cli部署Linux中Nginx安装这里找了一台Linux机器：tar–zxvfxxxxx.gz换root来搞./configuremakemakeinstall这里默认安装的位置为:/usr/local/nginx/这里在make后都可以看到的.在/usr/local/nginx...

目录基本概念代码与实例基本概念这里关于jsonp请看这篇博文：https://blog.csdn.net/qq78442761/article/details/102067313代码与实例这里把数据打印到控制台：程序结构如下：源码如下：config.jsexport const commonParams = { pre:...

目录过程结果过程命令行工具CLI，可以快速搭建大型简单应用#全局安装 vue-clinpm install --global vue-cli#创建一个局域 webpack 模板的新项目vue init webpack my-project#安装依赖cd my-projectnpm run dev这样就可以了，这里我使用WebStorm...

目录过程代码与实例过程首先下载echartscnpm install echarts -S//或者是cnpm install echarts --save下载好后：在main.js中导入：import echarts from 'echarts'Vue.prototype.$axios=Axios在vue中实例下：<te...

目录基本概念代码基本概念如下的例子，刚开始运行：点击按钮：数据库修改下数据：再点击按钮刷新下：下面给出请求的json数据:刷新有2个方式第一种是强制刷新，这样是有问题的，数据和图表不能同步：this.$forceUpdate()本人推荐下面这种方式，通过绑定组建的key值<barChartItem ...

目录演示代码演示运行截图如下：点击后，url跳转如下：代码页面跳转的关键程序结构如下：aaa.vue<template> <div>我是aaa <button @click="back">点我返回</button> </div></tem...

目录基本概念代码与实例个人理解基本概念现在的前端和后端都是通过api获取数据的。这里主要有这几条命令：npm i webpack vue vue-loadernpm i css-loader vue-template-compiler这里，就是使用了webpack和vue以及vue-loader下面那一行是他的依赖。这里看以下vue的文...

目录基本概念代码与实例基本概念通过在webpack.config.js这个文件中添加module rules进行如下代码：这里分别是加载vue，以及css，和styl样式和图片styl用于css预处理，模块化编写css这里还要说下图片，这里的options为其他的选项，比如：test: /\.(gif|jpg|jpeg|png|svg)$/, ...

目录过程演示源码打包下载过程演示首先在项目中导入插件：npm install jquery --savenpm install bootstrap --savenpm install popper.js --save程序结构如下：index.js中添加如下代码import '../../node_modules/bootstrap/dist/css...

目录基本概念代码与实例基本概念这个问题是在我使用echarts时出现的，因为echarts有这样的一个函数（官方实例）let myChart = this.$echarts.init(document.getElementById(this.idStr));这样的画就需要div的id号，为了使得这个id比较灵活，可以使用vue的绑定:id或者v-bind...

目录基本概念代码与实例基本概念这里主要是使用了css预处理首先下载包npm install stylus stylus-loader随后创建文件，然后写代码这里还要导入代码：这里还要引入下：程序运行截图如下：代码与实例文件结构如下：源码如下：blogbal.stylhtml, body{ m...

运行截图如下：原文链接如下：https://semantic-ui-vue.github.io/#/下面给出截图，部分网络不能访问

目录基本概念代码与实例基本概念在放json数组的时候，打印调试的时候不要使用alert，使用console.log进行打印，如下图：alert截图如下：使用console.log通过这种方式，就能对echarts进行灵活的配置：对比下这几种方式：代码与实例<template> <div...

css代码如下：<style> * { margin: 0; padding: 0; } .top { width: 100%; height: 40px; background-color: #2fa8ec; font-size: 20px; line-height: 25px; } .middle ...

今天这个问题搞了我2个多小时，原因是我在App.vue里面把<router-view/>删除了，导致了跳转失败！最后才发现，这个App.vue被改了，在此记录下，方便以后查阅！这里个人有个建议：在App.vue中不要加其他东西，在index.js也就是在router里面配置：把请求的组建写到这里面，尽量不要你动App.vue的东西...

目录基本概念关键代码基本概念这里安装好axios后，还要安装qsnpm install --save qs在vue cli中在created里面调用方法，他会在页面加载完成后自动调用！批量发送代码套到all里面的，就可以批量发送，然后v1，v2，v3就是最后的结果，通过qs的stringify可以添加post的表单数据。这里要注意...

目录以前的方法新方法以前的方法以前是通过router的push进行跳转，代码如下：<template> <div class="XXXXXXXXXXXXXXXXX" id="XXXXX" style=""> <div class="item"> <a><b><h1&gt...

目录基本概念div与vue实例绑定挂载点，模板，实例之间的关系插入页面的其他写法模板指令Vue中的属性绑定和双向数据绑定Vue中的计算属性和侦听器v-if，v-show，v-for指令TodoList功能开发TodoList中组建的拆分TodoList的删除基本概念目前有个功能，要使用到前端，本来是用Bootstrap的，但领导...