- 博客(26)
- 收藏
- 关注
RSS订阅
原创 vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计（每行末尾合计功能）
vue + element 实现可编辑表格、动态渲染表头表格数据、列向数据合计（每行末尾合计）1，首先得在项目中集成element-ui 安装，注册，具体参照 element-ui的集成2，我这里使用的vue-cli脚手架搭建的项目，可网上搜索相关知识3，我的需求，做一个比赛项目打分表，评委可以实现在线打分，表头和表格数据首先都是动态获取后台数据进行渲染，这里我先写成假数据以供大家参考...
2019-11-18 16:31:57
6828
原创 vue纯前端下载表格
一般我们做后台管理会遇到这样的需求：页面上的表格，需要纯前端技术来完成、不涉及接口对接、不涉及后端，就是你在页面上展示的表格是什么样，就要下载什么样的表格excel，方便人观察，废话不多说，上代码如图：点击下载表格按钮、这是web页面的效果 在最后一步可以看下载的表格效果1、安装依赖包 npm install --save xlsx file-saver npm install --save yxg-xlsx-style //调节样式需要用到的2、引入依...
2021-12-07 16:14:32
1877
1
原创 vue 如何PC端不同屏幕大小分辨率自适应
需求：vue自适应屏幕分辨率PC端 如果你做了一个vue的pc端项目，但是需要适应不同的分辨率和屏幕大小，你会发现在1080p*1920下开发的页面，把分辨率切换到1366或者其他的时候，页面会变得非常丑，字体变得超级大，还会换行等等，也许有很多公司都不会做这项业务，因为pc端项目，特别是后台管理，很少做分辨率自适应，但是如果有此需求呢 所以来开干吧，废话不多说，上代码吧！！！！！1、安装 postcss-px2rem及px2rem
2021-03-12 15:30:13
14917
14
原创 element中el-switch用法 实际项目案例
需求：在表格中使用el-switch开关 要求文字在开关内显示 、 官网给的不符合我们的要求 点击开关时给用户提示 是否启用禁用该状态 ？废话不多说 上代码 效果图你扒拉扒拉 见最后 看看是不是你需要的1、HTML部分 <el-table-column label="状态" align="center" min-width="100"> <template slot-scope="scope"> <el-switch
2021-01-13 16:55:47
8835
2
原创 element下拉按钮事件
element实现下拉菜单出来按钮 且每个按钮都有其相对应的事件，废话不多说、上代码1、HTML 部分 <el-table-column :label="操作" align="center" class-name="small-padding "> <template slot-scope="{row}"> <el-dropdown @command="handleCommand(row,$event)">
2021-01-05 10:42:03
2268
1
原创 VUE设置可读写的全局变量
VUE设置可读写的全局变量如果想随时修改全局变量的值，有一种办法：main.js中data定义，其他地方通过 this.$root.{paramName} 来引用/修改1、main.js 中定义 new Vue({ router, data: function(){ return { URL: 'http://localhost:8080', } }, render: h => h(App)}).$mo
2020-12-29 13:34:45
545
原创 element table只计算最后一列数据总和
需求：element table只计算表格中最后一列的总和官网中的示例是所有数字列都进行计算总和的。所以需要自己处理。1、HTML<el-table border show-summary :summary-method="getSummaries" :formatter="formatter" :default-sort = "{prop: 'projectName', order: 'descend
2020-12-12 09:35:47
2231
4
原创 element可编辑表格 可追加、删除、编辑数据
实现 vue + element可编辑表格（二）现在需要实现在表格追加数据 且可编辑 废话不说 上代码吧 1、html部分 <!-- 新增可编辑表格 --> <el-table :data="tableData" border fit highlight-current-row style="width: 100%" > <el-table
2020-10-16 16:03:01
5903
2
原创 git常用命令及常见问题
1、使用git克隆指定分支的代码如图，一个项目有多个分支的情况下 我们需要克隆指定的分支使用Git下载指定分支命令为：git clone -b 分支名仓库地址$ git clone -b dev + 仓库地址
2020-09-28 13:58:19
4284
原创 Vue + Element + Table 分页选择勾选 和取消勾选的问题
Vue + Element + Table 分页选择勾选 和取消勾选的问题问题描述： 需求是这样的===》表格前面每条数据都有复选框吧 然后表格有很多页 ， 我从第一页选取N条数据 再去其他页选取M条数据 同时对选中的这M+N条数据进行一系列操作（如：批量删除、添加、修改等等吧，按自己需求来） 但是发现 在第一页选取数据之后 再去其他页再去选取数据 然后回到第一页 第一页选取的数据已经不是勾选状态了 这样就不符合我的需求了 就是切换页码 在回到之前 之前的选中状态已经清除了
2020-07-31 17:30:57
6362
7
原创 vue element 文件上传（单文件、多文件手动上传） 、 文件下载
一、文件上传记一次文件上传和文件下载，写的比较仓促，就记录了代码过程，其他没有详细解释，只为记录自己知识积累的过程。1、单文件上传HTML部分： <el-row v-for="(item,index) in DebugfileList"> <el-col :span="10"><span>{{item.name}}</span></el-col> <el-col :span="14">
2020-07-06 09:23:24
1631
原创 github上拉去代码执行 npm install报错code：128
今天项目刚从github拉取的，但是报错，具体报错信息如下：` npm ERR! code 128npm ERR! Command failed: git clone --mirror -q git://github.com/adobe-webplatform/eve.git C:\Users\javadev1\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-d285df55\.git --config core.longpaths=truenpm E
2020-05-29 16:52:23
1100
原创 el-dialog动态显示title提示
假如你有一棵树，或者一个按钮，你点击这个树上的节点或者点击这个按钮，出来的对话框是一样的，但是对话框左边的提示不一样，这时候就需要动态添加title的提示语比如我点页面树的节点 会出来添加人员按钮 点击添加人员 会出来这个dialog对话框 左上角有个添加人员 我需要在点击按钮的饿时候知道 我在给树的哪个节点添加人员 这时候就需要动态显示 添加*人员 而此时的就是树的节点的名称 我这个树的数据在table.vue 里面，我要想拿到这个节点的名字，我需要涉及到组件传值问题。话不多
2020-05-09 10:56:40
5118
原创 vue-devtoos的安装（最easy）
可能很多博客都是需要进行安装Vue-devtools，在一个github下面用git clone或者手动下载一个叫做vue-devtools-master的文件，然后运行命令 npm install下载依赖包，在运行命令npm install build 然后再修改配置文件，但是这一过程看似简单，但是往往在npm...
2019-12-10 11:10:39
353
原创 npm i报错 npm ERR! path git npm ERR! code ENOENT npm，后续npm i继续报错gyp ERR! node -v v12.13.1
1，新搭建的环境，node版本，npm版本，Vue-cli版本，webpack版本都应该是最新的，具体版本号如下：2，之后npm i就报错如下：npm ERR! path gitnpm ERR! code ENOENTnpm ERR! errno ENOENTnpm ERR! syscall spawn gitnpm ERR! enoent Error while executing...
2019-12-03 10:28:01
20770
原创 解决element-ui的table表格的表头与内容列对齐问题
直接上代码，就是在style上加一个样式，如果多个页面涉及的表格过多，可定义一个全局样式<style> /* 解决element-ui的table表格控件表头与内容列不对齐问题 */ .el-table th.gutter{ display: table-cell!important; }</style>这样就大功告成啦！！！！！！对齐啦！！！...
2019-11-28 08:51:04
5178
原创 vue写的PC端表格，如何在移动端显示？
写了个pc端的页面，基本上是个表格吧！在移动端显示不正常，只能显示部分。不知该如何处理，最后是这样解决的ebody加个样式 min-width: 1200px;然后就真的可以显示了 ，这是在移动端显示的页面解决了一个小问题，真的很开心啊...
2019-11-27 15:07:04
3714
6
原创 vue启动控制台报错 Failed to load resource: net::ERR_CONNECTION_REFUSED
最近做一个小项目，没改动什么代码，启动控制台就报错Failed to load resource: net::ERR_CONNECTION_REFUSED，而且network请求也有报错，但是数据渲染和交互都没有什么问题，百度了也没找到解决的办法，最后发现，启动的时候端口是8085，如图所示：且浏览器的地址也是8085但是我的端口号明明一直是8080的，之前七佛那个的时候也一直是8080，因...
2019-11-27 14:57:58
60436
3
原创 vue使表头文字居中，表格某一列文字左对齐的方式
直接上代码<template> <div> <el-container> <h1 style="margin:20px 0">{{msg}}</h1> <el-main> <div> <el-table bor...
2019-11-27 14:43:59
13867
原创 vue打包发布到服务器出现空白页问题
vue打包发布的时候，经常出现的问题，就是进去是空白的，时而报错，时而不报错1， vue2.0项目中config文件下index.js中打包配置 // vue3.0+项目中无config文件，在根目录下创建vue.config…js中打包配置module.exports = { publicPath: './', // 根域上下文目录 outputDir: 'dist'...
2019-11-22 15:58:15
1138
原创 表单+表格 提交按钮向后台提交数据
1，首先我的表格数据都是读取后台接口出来的数据，表单数据是前端在页面输入才有，但是表格数据默认的都是0，但是通过评委在页面打分，点击提交按钮,把数据提交到后台 ，后台进行处理。2，需要把姓名的表单数据，还有各个项目的指标的得分（在这里实际上是tableData的数据），总分，这些数据给提交到后台3，HTML代码<template> <div> <e...
2019-11-18 17:02:00
4450
原创 vue用命令批量解决ESLint警告
在vue里使用了eslint之后，代码不规范就会报很多警告的错误，也会提示红色下划线，一个一个的改，工作量太大，这样就很让人头疼，下面讲一下怎么批量去解决这些由于eslint代码不规范引起的错误警告步骤如下：1、打开package.json，在script里找到修改为：（中间插入–fix） “lint”: “eslint --fix --ext .js,.vue src test/un...
2019-10-18 16:09:29
1929
原创 vue全局注册组件
全局注册组件Vue是一个组件化开发的框架，一般我们在项目中使用组件的步骤是这样的。1.创建一个组件：比方说我们现在新建一个demo.vue文件，随便写一行代码。<template> <div> {{msg}} </div> </template><script>export defaul...
2019-10-12 17:49:54
132
原创 Npm run dev报错missing script: dev的解决办法
Vue启动报错- Npm run dev报错：missing script: dev今天在运行Vue项目时，在运行npm run dev时报错如下图：打开package.js文件夹，看文件夹里的scripts看有无dev选项情况一：打开的是当前文件夹，文件夹package.js里的scripts确实有dev,可就是好不到，什么原因呢？最后一看路径不对，vue init webpac...
2019-10-12 17:27:26
35403
4
原创 页面布局
一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法： PC：居中布局...
2019-06-10 17:43:29
248
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人