- 博客(110)
- 收藏
- 关注
RSS订阅转载 什么,你还不会 vue 表格跨页多选?
在我们日常项目开发中,经常会有表格跨页多选的需求,接下来让我们用el-table示例一步步来实现这个需求。
2023-11-29 17:52:23
113
原创 elementUI Table 表格编辑数据后停留当前位置
data() {return {scrollTop: '', // 滚动条位置elTable: this.$refs.elTable.bodyWrapper, // 获取table表格父级的classname},table表格出现滚动条渲染的结构和样式。
2023-04-18 09:45:01
1216
2
原创 css 实现textarea标签高度自适应
.grow-wrap { display: grid; word-break: break-all;}.grow-wrap::after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden;}.grow-wrap>textarea { resize: none; overflow
2022-06-30 11:38:59
1234
原创 vue + elementUI 表单重置两种方法
在 添加 ref属性，然后使用this.refs["ruleFormRef"].resetFields()或者this.refs.ruleFormRef.resetFields()二、this.$options.data()是vue实例初始化时的data数据，只读属性
2022-06-22 14:20:03
968
原创 css3 nth-child的妙用
一、选择列表中的偶数标签 :nth-child(2n)二、选择列表中的奇数标签 :nth-child(2n-1)三、选择从第6个开始的，直到最后:nth-child(n+6)四、选择第1个到第6个 :nth-child(-n+6)一、两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9)...
2022-06-10 11:56:19
97
原创 vue 使用echarts 进行简单封装统一使用
使用echartsnpm install echarts --save || cnpm install echarts --save定义wkCharts.vue<template> <div :class="className" :style="{ height: height, width: width }" /></template><script>import echarts from "echarts";export def
2022-05-30 14:38:23
277
转载 Vue封装Vant选择器组件
由于Vant原生的选择器组件只支持值列表的数据，而不支持键值对列表的数据，并且使用较为麻烦，于是对Vant的选择器组件进行了封装。封装组件代码 <template> <!-- 封装vant的选择器 --> <div> <van-field readonly clickable name="picker" :value="text" :label="label" :p.
2022-02-25 17:20:25
860
2
原创 moment.js计算时间差
filterTaskTime(params){ let x=moment(params); let y=moment(); //当下时间 let duration = moment.duration(y.diff(x,'ms')); //做差 let days = duration.get('days'); let hours = duration.get('hours'); let mins = duration.get('minutes'); .
2022-02-25 17:17:33
1261
原创 css table 表格等宽
<table border="1" style="table-layout: fixed;width: 200px"> <tbody> <tr> <td>AAA</td> <td>B</td> <td>C</td> </tr> </tbody></t.
2022-01-25 14:53:06
884
原创 Element UI Tree 树形控件（可选择）,如果子级有值，父级禁用的两种操作
总结了两种方法：一、父级的复选框禁用<el-tree :data="deptOptions" node-key="id" :props="defaultProps" :expand-on-click-node="true" :filter-node-method="filterNode" :check-strictly="true" show-checkbox ref="tree" @check="hand...
2021-10-29 09:28:02
4329
1
原创 vue实现某个页面强制刷新router-view
1、先修改App.vue<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: "App", provide() { return { reload: this.reload, }; }, data(
2021-09-24 14:23:02
851
原创 vue 身份证号码 中间用*代替
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue filters</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script&g...
2020-12-21 10:26:00
1147
原创 Vue 文本超过三行展示省略号，并加上展开和收起的功能
场景：在vue项目中文本超过三行展示省略号，并加上展开和收起的功能在处理多行文本时，经常会遇到各种各样的需求，比如至多展示三行，多余的部分不展示并以省略号结尾；又比如在这个基础上加上一个展开和收起的功能。同时UI的展示上还要求和文本本身的位置相对应。具体实现思路如下： 1、判断当前内容是否超过三行。此处可以给每行设置一个行高line-height,渲染完后超过三倍的行高即认为是内...
2020-12-09 10:53:00
5988
12
原创 localstorage本地储存，统计访问页面次数
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">if (localStorage.pagecou...
2020-11-10 15:35:00
429
原创 vue moment.js的用法
安装之后再main.js里面引入和创建全局过滤器import moment from "moment";//定义全局过滤器实现日期格式化Vue.filter("format", function(input, fmtstring) { // 使用momentjs这个日期格式化类库实现日期的格式化功能 return moment(input).format(fmtstri...
2020-11-03 09:37:00
201
原创 vue项目在ios从详情页返回到列表页白屏
问题描述：进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决；原因是，经过排查，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩解决的理论：用于最重要的html 容器是container，然而因为设置ht...
2020-10-19 11:15:00
490
原创 ElementUI之动态增减表单项，循环表单验证（单层循环与双重循环）
Element的表单验证要注意的就是v-model和prop的值要对应上，不然无法触发验证1.单层循环表单html代码如下： <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <templa...
2020-10-13 14:56:00
1487
1
原创 js+canvas实现任意数字、字符生成图形验证码，根据后端接口返回的数据，生成图形验证码...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js+c...
2020-09-27 11:02:00
421
原创 正则匹配十六进制的色值，以#号开头
<input type="text" name="color"><input type="button" value="check" οnclick="checkColor('color')">检查一下颜色值 ,正确是#+六位十六进制数比如:#3EEF4A<script language="JavaScript">function che...
2020-09-16 16:44:00
915
原创 正则验证输入框禁止输入emoji表情
方案一：提交验证var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\...
2020-09-08 11:23:00
4020
1
原创 vue v-for循环里面点击当前元素显示再点击隐藏
<li v-for="(list,index) in getTableData(currentPage)" :key="index"> <div class="popup-msg-div"> <div class="msg-div-add">{{list.detail_address}}&l...
2020-08-31 13:55:00
1441
原创 elementUI中form表单的upload上传图片及校验总结
自定义校验方法,因为我的项目是,分情况,可以选择是否有图,所以我定义了一个变量hasFmt,当他为false的时候,才会要求上传,走这个校验方法,rules里声明这个方法 var valiIcon = (rule, value, callback) => { // 图片验证 if (!this.hasFmt) { callback(new Error('...
2020-08-25 14:53:00
1632
原创 JS：复制内容到剪贴板（无插件，兼容所有浏览器）
<button onclick="copyToClip('内容')"> Copy </button>/** * 复制内容到粘贴板 * content : 需要复制的内容 * message : 复制完后的提示，不传则默认提示"复制成功" */function copyToClip(content, message) { var aux =...
2020-06-30 17:28:00
344
原创 js 压缩上传的图片方法（默认上传的是file文件）
//压缩图片方法function compressImg(file,callback){ var src; var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2); var read = new FileReader(); read.readAsDataURL(fil...
2020-06-18 11:58:00
972
3
原创 vue封装组件调用时绑定click事件
我们在开发中会封装许多的通用的组件，那么如何封装好一个组件时，在调用的时候绑定click事件呢？1.child组件<template> <div class="child" @click="$emit'childClick',123) /> //说明：第一个参数：childClick ，是事件名，在调用的时候需要用到，第二个参数123，是你在调...
2020-05-15 16:51:00
1181
原创 vue cli3 区分开发环境，测试环境，正式环境（二）
1. 在根目录下新建 .env.xx (xx可以是自己取的用来区分这三个环境）下面是我新建的，分别对应测试环境，开发环境，正式环境2. 配置测试环境：NODE_ENV = 'production'VUE_APP_FLAG = 'test'outputDir = 'test'开发环境：NODE_ENV = 'development'VUE_APP_FLAG = ...
2020-05-07 09:27:00
890
原创 vue 动态修改网页标题 title
1、安装npm install vue-wechat-title --save 或 npm install vue-wechat-title -S2、使用，在main.js中引用插件import VueWechatTitle from 'vue-wechat-title'Vue.use(VueWechatTitle)3、在路由router文件 index.js 中给每个...
2020-04-28 17:42:00
597
原创 vue移动端适配（px转vw）postcss-px-to-viewport配置
安装postcss-px-to-viewportnpm install postcss-px-to-viewport根目录新建postcss.config.js文件//postcss.config.js文件module.exports = { plugins: { 'postcss-px-to-viewport': { unitToConvert: ...
2020-04-15 08:24:00
3866
原创 veu创建项目，自定义配置
选项含义Babel是一个js 编译器 用于让你的js语法向后兼容 在打包的时候 选TypeScript.ts 后缀 js的一个超集 我的理解是更高级的 兼容js的语法吧 不选Progressive Web App (PWA) Support什么渐进式网络应用程序 个人理解 应该是做应用方面的 不选Router这个是vue 家族的 用于管理路由的 ...
2020-04-14 17:18:00
193
原创 vue cli3配置开发环境、测试环境、生产（线上）环境
cli3创建vue项目是精简版的少了build和config这2个文件，所以配置开发环境、测试环境、生产环境的话需要自己创建env文件。需要注意2点：1、cli2创建项目生成的config文件里的env文件是js后缀2、cli3创建自定义env文件的话不需要js后缀下面开始创建配置：一、直接在你项目的根目录创建三个文件（注意都没有后缀，直接创建新文件）：.env.develop...
2020-04-01 09:31:00
2056
原创 vue cli3配置开发环境、测试环境、生产（线上）环境（一）
cli3创建vue项目是精简版的少了build和config这2个文件，所以配置开发环境、测试环境、生产环境的话需要自己创建env文件。需要注意2点：1、cli2创建项目生成的config文件里的env文件是js后缀2、cli3创建自定义env文件的话不需要js后缀下面开始创建配置：一、直接在你项目的根目录创建三个文件(注意都没有后缀，直接创建新文件)：.env.develop...
2020-04-01 09:31:00
664
原创 vue封装axios
一、安装axiosnpm install --save axios二、在src下面创建文件夹api=>api.js(接口集合)+http.js(封装的请求)三、在main.js中引用api.js和http.js//引入两个文件import api from './api/api'import http from './api/http'//挂载到VUE实例，以便全局...
2020-03-25 16:39:00
78
原创 Git上传新项目到Gitee
在码云客户端创建项目然后在要上传的项目文件夹中右键 Git Bush Here如下git config --global user.name "tuoni"git config --global user.email "[email protected]"git initgit remote add origin https://xxx //Gitee项目地址git add .g...
2020-03-25 14:14:00
96
原创 Flex 布局教程：实例
一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明，本节的HTML模板一律如下。<div class="box"> <span class="item"></span></div>上面代码中，div元素（代表骰子的...
2020-03-17 10:15:00
145
原创 vue项目使用Vant框架Rem适配（postcss-pxtorem、lib-flexible ）的安装使用
1.下载lib-flexible使用的是vue-cli+webpack，通过npm来安装的npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexibleimport 'lib-flexible/flexible'3.设置meta标签通过meta标签，设置设备宽度以及缩放比例<meta nam...
2020-03-17 08:48:00
2162
原创 vue项目使用qrcodejs2生成二维码
1、安装cnpm i qrcodejs2 -S2、项目中使用HTML:<!-- 放置二维码的容器,需要给一个ref --> <div id="qrcode" ref="qrcode"></div>js:// 引入import QRCode f...
2020-01-05 15:32:00
445
原创 Element ui select获取label的值
<el-select v-model="value" @change="change"> <el-option v-for="item in list" :key="item.id" :label="item.name :value="item.id"></el-option></el-select> ...
2020-01-05 09:46:00
1333
2
原创 vue+element-ui实现可折叠的树形表格
先看看效果图：一，首先创建一个公共的文件夹treeTable,里边放一个index.vue和eval.js先看看index.vue，原理就是在element-ui的基础上做了进一步改造。//利用element-ui的 <template slot-scope="scope">属性，在插入多级表格<template> <el-tab...
2020-01-02 09:22:00
4289
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人