- 博客(184)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 【多选框、表格全选】element el-checkbox、el-table
【多选框、表格全选】element el-checkbox、el-table。
2023-07-24 16:03:26
1513
3
原创 如果代码已关联git仓库，但是想将代码提交到新的仓库，应该如何做？
现在可以进行本地代码的修改和提交了。命令来查看当前所在分支。如果需要切换到另一个分支，可以运行。标志告诉 Git 将当前分支（本地分支）关联到新的远程分支。在其他 Git 仓库中创建新的仓库，并复制仓库的 URL。现在，你的本地代码已经关联到了一个新的远程仓库。命令时，Git 将会将代码推送到新的仓库中。确保你当前在正确的分支上。打开命令行终端并导航到你的本地代码仓库。这将删除你之前关联的默认远程仓库。是你新建的远程仓库的 URL。是你要推送的分支的名称。
2023-06-23 11:46:56
2248
原创 element-ui 中标签el-select选中无反应问题
el-select标签，如果外部还嵌套循环，点击选中标签无反应，删除也不好使，原因由于层次太多，导致render函数没有自动更新；在el-select标签内加入 @change=“$forceUpdate()” ，强制刷新视图即可。
2022-06-20 13:56:52
5614
原创 vue在多方法执行完后再执行另一个方法（等待请求完数据再执行）async/await使用方法
vue 中的 async await 异步 等待 按顺序执行
2022-06-17 14:17:30
8720
原创 vite项目启动报错【 Cannot find module ‘unplugin-vue-components/vite 】
vite项目启动项目报错
2022-06-01 17:14:36
2985
原创 常用简洁的 JS 代码片段
1、单行 If-Else 语句这是许多编程语言的共同特征。你可以使用三元运算符用一行代码编写整个语句，而不是在多行上编写 if-else。const age = 12;let ageGroup;// 常用写法if (age > 18) { ageGroup = "An adult";} else { ageGroup = "A child";}// 简写ageGroup = age > 18 ? "An adult" : "A child";但是，不要过度使
2022-04-01 17:44:10
477
原创 vue 动态添加条件或表头
话不多说 直接看效果代码如下：<template> <div> <el-form ref="formRef" label-width="70px" :model="formData" autocomplete="on" @submit.prevent> <el-row v-for="(item, index) in formData.querys" :key="index" :gutter="16" :xs="24">
2022-03-07 13:50:46
1152
1
原创 vue使用clipboard.js 《一键复制》
安装npm install clipboard --savevue项目我们可以对其进行简单的处理我们可以在项目目录下utils(没有新建)新建一个 clipboard.js文件import Clipboard from 'clipboard' //引入cliboardimport { ElMessage } from 'element-plus' //消息提示function clipboardSuccess(msg) { ElMessage.success(msg || '..
2021-11-11 15:09:16
1951
原创 vue3 响应式原理 和vue 2 响应式原理对比
vue2.x的响应式实现原理：对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。Object.defineProperty(data, 'count', { get () {}, set () {}})存在问题：新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。Vue3.0的响应式
2021-08-26 15:19:14
185
原创 VUE3项目搭建【vue-cli 及 vite】
第一种：通过 vue-cli 脚手架进行项目搭建：VUE3项目创建对VUE-cli的版本是有限制的，版本必需在 4.5.0以上才可以我们可以在 cmd 窗口 输入 vue -V 来进行查看如果版本不对的话可以进行版本升级：npm install -g @vue/cli建议以下方式：1.通过config命令npm config set registry https://registry.npm.taobao.orgnpm info underscore （如果上面配置正确这个命令会有字
2021-08-25 14:09:34
372
转载 js立即执行函数
一：什么是立即执行函数？声明一个函数，并马上调用这个匿名函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行；立即执行函数的创建步骤，看下图：二：立即执行函数的写法：有时，我们定义函数之后，立即调用该函数，这时不能在函数的定义后面直接加圆括号，这会产生语法错误。产生语法错误的原因是，function 这个关键字，既可以当做语句，也可以当做表达式，比如下边：//语句function fn() {};//表达式var fn = function (){};
2021-08-06 16:29:41
10300
原创 vue input输入框实时搜索
废话不多说先看效果：代码如下：<template> <div style="padding-left: 3px; margin-top: 3px"> <!-- 搜索框 --> <div class="input-warp"> <input class="input" v-model="keyWord" type="text" placeholder="输
2021-07-29 17:26:07
922
原创 vue全局修改字体样式(修改成苹方)
1.首先你要先下载你需要的字体（这里已苹方为例）2.在你的项目 src 文件下创建一个文件夹里面有两个文件， 一个是你需要的字体的文件，一个是 css 样式文件3.其中 css 文件里面设置一下样式：@font-face { font-family: 'PingFang'; src: url('./PingFang.ttf'); font-weight: normal; font-style: normal;}4. 在 app.vue 文件中引入字体，全局修改
2021-07-20 17:50:25
6128
3
原创 element-upload 上传图片限制文件格式、大小以及隐藏上传框
废话不多说 先看效果代码如下：<template> <div> <div> <el-upload class="avatar-uploader" :action="upUrl" :on-success="handleAvatarSuccess" list-type="picture-card" :before-upload="beforeAvatarUplo
2021-07-13 17:15:54
1366
原创 Vue项目 封装 axios请求 （直接复制可用）
首先先在你的项目中安装 axios$ npm install axios安装完成之后可以在 package.json 文件中看到然后在项目 src 文件夹下创建一个文件来进行请求的封装然后 request 文件是对 axios 的处理 ，里面包含 请求头的配置 已经请求拦截和响应拦截相关的一些配置，api 文件夹主要就是 对接口的封装。项目中用到的接口 都可以写道这里面1. 先看 request 文件代码如下：(当然这写注释可以删掉)// 这是一个封装请求接口的文件import ax
2021-07-11 19:03:24
268
原创 Vuex数据 页面刷新丢失问题解决方案
通常在vue项目中使用vuex做全局的状态管理，但是刷新之后，vuex中的数据会丢失因为store是存储在运行内存中，当浏览器刷新时，会重新加载vue实例，store也会重新赋值通常将一些数据保存在localstorage、sessionstorage或cookie中，可以保证页面刷新数据不丢失且易于读取。vue项目一般操作都在同一个页面跳转路由，所以使用sessionstorage进行存储直接在app.vue文件添加以下代码：解决页面刷新vuex数据丢失问题 created() { i
2021-07-03 11:31:06
343
原创 ES6 对象的简化写法
ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法前提是对象的属性必须和变量的名字是一样的let name = '你好'let famous = function() { console.log('时间管理大师')}const star = { name, famous}// 相当于// const star = {// name: name,// famous: famous// }ES6还允许在对象中写函数时，去掉:
2021-06-04 19:36:32
260
原创 uniapp 小程序 手写弹框单选选择器
先看效果：直接贴代码：<template> <!-- 退款申请页面 --> <view> <nav-bar title="退款申请"></nav-bar> <view class="application"> <view class="goods"> <view class="houseImg"> <image :src=
2021-04-30 18:40:42
839
2
原创 vue 多选按钮 点击选中改变样式 再次点击取消选中
话不多说 先看图代码： <view class=""> <view class="oneTit"> 房源属性(多选) </view> <view class="listingsSty fangy"> <view class="firsty" v-bind:class="item.ischeck == true ? 'active'.
2021-04-24 10:30:07
2124
1
原创 uniapp开发微信小程序获取用户基本信息以及手机号 uni.getUserProfile getPhoneNumber
首先获取用户信息以及手机号必须要通过button按钮点击实现小程序登录、用户信息相关接口调整说明官方一、获取用户信息（友情链接）依据微信小程序开发文档描述，先写一个button按钮，open-type设为getUserProfile，在uniapp页面中创建按钮 <button style="border: none; height: 120rpx; width: 120rpx" class="login obta..
2021-04-24 09:56:20
2995
转载 Element-UI的Table组件解决换页后序号重新从1开始的问题
问题：使用了el-table，设置indx属性显示数据的行号后，发现第二页的序号还是从1开始排序解决：设置一个count方法，在换页后重新计算表格行号 <el-table-column label="ID" type="index" :index="count" />在method方法中添加以下方法：count(index) { return (this.currentPage - 1) * this.pageSize + index
2021-04-14 10:57:55
1073
原创 element el-table组件实现列表自动滚动
效果图：需要配合vue-seamless-scroll插件安装命令行执行:npm install vue-seamless-scroll --save然后在main.js文件里面引入使用：import scroll from 'vue-seamless-scroll'Vue.use(scroll)代码：<template> <div class="min"> <div style="display: inline-bloc
2021-01-29 16:19:24
4503
6
原创 Echarts 渐变折线图
图例：代码：<template> <div class="policPic"> <div id="chart_example" ref="chart_example"></div> </div></template><script>export default { data() { return {}; }, created() {}, mounted() {
2021-01-29 11:51:26
450
原创 Echarts 横向柱状图
实例图片：横向显示将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 placeCharts() { let myChart = this.$echarts.init(sportIMg); myChart.setOption({ grid: { left: "15", containLabel: true, }, xAxis:
2021-01-29 11:15:58
18545
2
原创 VUE项目中使用 Echarts data Zoom缩放功能
看实例：data zoom:有inslide和slide两种dataZoom，也分X,Y轴dataZoom:[ { type:"slider",//slider表示有滑动块的， show:true, xAxisIndex:[0],//表示x轴折叠 start:1,//数据窗口范围的起始百分比,表示1% end:20//数据窗口范围的结束百分比,表示20%坐标 }, { .
2021-01-29 09:45:43
2344
1
原创 CSS3 图片旋转
项目中需要的效果，外面和里面的正转，中间的反转，看效果：图片：直接贴代码： <div class="dataContent"> <div class="classPerson"> <div class="personTitle">当前教室人员情况</div> <div class="imgBox"> <img s
2021-01-28 16:59:05
189
原创 vue项目如何实现每隔多长时间请求一次接口？？？
在实际项目中我们经常需要实现轮询-每隔一段时间请求一次接口刷新数据window.setInterval(() => {setTimeout(() => {///调取接口}, 0)}, 30000)具体秒数看需求而设定，这里先设定30秒（setTimeout是自带清除定时器）在vue项目中我们直接在 created(){} 生命周期中写就可以了 created() { this.currentTime(); this.getRoleList();
2021-01-27 13:22:29
6483
1
原创 关于VUE + Element 侧边栏页面刷新后不高亮显示的问题
写后台管理系统 我们会经常用到element,侧边栏导航的时候路由跳转没有问题 但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了，针对这个问题特别提出以下见解：直接贴代码：<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" text-color="#333"
2021-01-25 09:26:33
1027
原创 VUE + Element-UI 使用el-table 如何实现表头文字加文字说明
先看效果：当鼠标放到“❓”上面是，弹出一个小框进行提示：代码如下：给 el-table-column 添加:render-header="renderHeader"然后在methods 方法中这样写： // 表头增加提示 // render 事件 renderHeader(h, { column }) { return h("div", [ h("span", column.label), h( ...
2021-01-21 18:19:38
3330
原创 VUE + element使用 el-table 组件实现不同的状态值显示不同的颜色？
先看想要的效果：因为现在从后台请求的数据都是离线的。所以都是红色，如果有在线的 ，字体需要变成绿色直接代码附上： <el-table-column prop="temperatureStatus" label="状态"> <template scope="scope"> <span v-if="scope.row.temperatureStatus == '正
2021-01-21 18:10:14
2531
原创 【js数组】如何删除不想要的数据？
<script>export default { data() { return { data: [14, 25, 69, 24, 14, 59, 57, 68,57, 45, 879, 58,58, 42, 25, 56, 14], one:[] }; }, created() { this.x(); }, mounted() {}, methods: { x() { console.log(t.
2021-01-14 16:41:01
324
原创 css，图片和文字在父元素垂直居中
css，图片和文字在父元素垂直居中，且图片和文字在中线对齐排列的几种方式一，用flex的副轴来垂直居中对齐1.副轴（由上到下）设置居中对齐（align-items: center;）即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .
2020-12-09 10:33:46
992
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人