一、js部分
1.1 过滤HTML标签
function filterHTMLTag(str) {
var msg = str.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
msg = msg.replace(/[|]*\n/, ''); //去除行尾空格
msg = msg.replace(/ /ig, ''); //去掉npsp
return msg;
}
1.2 input输入内容正则表达式校验
//只能输入数字
onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
//金额格式判断
function onlyNumber(obj){
//得到第一个字符是否为负号
var t = obj.value.charAt(0);
//先把非数字的都替换掉，除了数字和.和-号
obj.value = obj.value.replace(/[^\d\.\-]/g,'');
//前两位不能是0加数字
obj.value = obj.value.replace(/^0\d[0-9]*/g,'');
//必须保证第一个为数字而不是.
obj.value = obj.value.replace(/^\./g,'');
//保证只有出现一个.而没有多个.
obj.value = obj.value.replace(/\.{2,}/g,'.');
//保证.只出现一次，而不能出现两次以上
obj.value = obj.value.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
//如果第一位是负号，则允许添加
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
if(t == '-'){ return; }
}
//vue
handleNumber(index){
//先把非数字的都替换掉，除了数字和.s
this.tableData[index].pressure = this.tableData[index].pressure.replace(/[^\d\.]/g,'');
//前两位不能是0加数字
this.tableData[index].pressure = this.tableData[index].pressure.replace(/^0\d[0-9]*/g,'');
//必须保证第一个为数字而不是.
this.tableData[index].pressure = this.tableData[index].pressure.replace(/^\./g,'');
//保证只有出现一个.而没有多个.
this.tableData[index].pressure = this.tableData[index].pressure.replace(/\.{2,}/g,'.');
//保证.只出现一次，而不能出现两次以上
this.tableData[index].pressure = this.tableData[index].pressure.replace('.','$#$').replace(/\./g,'').replace('$#$','.');
this.tableData[index].pressure = this.tableData[index].pressure.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
},
1.3 点击按钮使input标签获取焦点在文字末尾
$(".phoneclick").on("click",function(){
var $val = $("#userPhone").val();
$("#userPhone").val("").focus().val($val);
})
1.4 监听页面是否全屏及点击全屏
//监听是否全屏
window.onresize = function (){
var isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
if(isFull){
console.log('全屏')
} else{
console.log('没有全屏')
}
}
//点击全屏
let exitFullscreen = false;
// 全屏事件
function handleFullScreen() {
let element = document.documentElement;
if(this.fullscreen) {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
}
1.5 获取元素的上一个、下一个兄弟元素
var chils= s.childNodes; //得到s的全部子节点
var par=s.parentNode; //得到s的父节点
var ns=s.nextSibling; //获得s的下一个兄弟节点
var ps=s.previousSibling; //得到s的上一个兄弟节点
var fc=s.firstChild; //获得s的第一个子节点
var lc=s.lastChild; //获得s的最后一个子节点
1.6 数组去除重复数据
//遍历数组法
let oldArr = [1, 2, 3, 4, 5, 5 , 6, 7, 8, 2, 3];
let newArr = unique(oldArr);
function unique(arr){
let hash=[];
for (let i = 0; i < arr.length; i++) {
if(hash.indexOf(arr[i]) === -1){
hash.push(arr[i]);
}
}
return hash;
}
//数组下标判断法
let oldArr = [1, 2, 3, 4, 5, 5 , 6, 7, 8, 2, 3];
let newArr = unique(oldArr);
function unique(arr){
let hash=[];
for (let i = 0; i < arr.length; i++) {
if(arr.indexOf(arr[i]) === i){
hash.push(arr[i]);
}
}
return hash;
}
//排序后判断
function unique(arr){
arr.sort();
let hash = [arr[0]];
for (let i = 1; i < arr.length; i++) {
if (arr[i] != hash[hash.length-1]) {
hash.push(arr[i]);
}
}
return hash;
}
1.7 文本输入时禁用粘贴
<div id="outer">
<textarea id="test"></textarea>
</div>
<script>
var test = document.getElementById('test');
//禁止粘贴
test.onpaste = function () {
return false;
};
//禁止拖拽文字进入文本框
test.ondrop = function () {
return false;
};
</script>
1.8 js给静态文件增加时间戳
<script>
document.write('<link href="../css/main.css?v=' + new Date().getTime() + '" rel="stylesheet" type="text/css"/>');
document.write('<script src="js/textarea.js?' + new Date().getTime() + '"><\/script\>');
document.write('<img style="height: 200px; width: 200px" src="${pageContext.request.contextPath}/img/page.jpg?time=' + new Date().getTime() + '"class="a b" />');
</script>
1.9 根据数组属性值把一个数组拆分为多个数组
//第一种方法
//原始数组
let arr = [
{ date: '2018-01-06',SW: '90.95', LL: '136', XXSW: '80.22',CKLL: '500' },
{ date: '2018-01-06', SW: '164.95', LL: '137', XXSW: '99.22', CKLL: '93' },
{ date: '2018-01-07', SW: '176.95', LL: '236', XXSW: '99.22', CKLL: '93' },
{ date: '2018-01-07', SW: '178.95', LL: '236', XXSW: '99.22', CKLL: '93' },
{ date: '2018-01-07', SW: '182.95', LL: '236', XXSW: '99.22', CKLL: '93' },
{ date: '2018-01-08', SW: '187.95', LL: '366', XXSW: '99.22', CKLL: '93' },
{ date: '2018-01-09', SW: '197.95', LL: '466', XXSW: '99.22', CKLL: '93' }
]
//调用方法
let dataArr = [];
arr.map(mapItem => {
if (dataArr.length == 0) {
dataArr.push({ date: mapItem.date, List: [mapItem] })
} else {
let res = dataArr.some(item=> {//判断相同日期，有就添加到当前项
if (item.date == mapItem.date) {
item.List.push(mapItem)
return true
}
})
if (!res) {//如果没找相同日期添加一个新对象
dataArr.push({ date: mapItem.date, List: [mapItem] })
}
}
})
//结果
dataArr = [
{
date:'2018-01-06',
List: [
{ date: '2018-01-06', SW: '90.95', LL: '136', XXSW: '80.22', CKLL: '500' },
{ date: '2018-01-06', SW: '164.95', LL: '137', XXSW: '99.22', CKLL: '93' }
]
},
{
date:'2018-01-07',
List: [
{ date: '2018-01-07', SW: '176.95', LL: '236', XXSW: '99.22', CKLL: '93' },
{ date: '2018-01-07', SW: '178.95', LL: '236', XXSW: '99.22', CKLL: '93' },
{ date: '2018-01-07', SW: '182.95', LL: '236', XXSW: '99.22', CKLL: '93' },
]
},
{
date:'2018-01-08',
List: [
{ date: '2018-01-08', SW: '187.95', LL: '366', XXSW: '99.22', CKLL: '93' },
]
},
{
date:'2018-01-09',
List: [
{ date: '2018-01-09', SW: '197.95', LL: '466', XXSW: '99.22', CKLL: '93' }
]
}
]
//第二种方法
var arr=[{name:2,id:3},{name:2,id:4},{name:3,id:5},{name:3,id:6},{name:1,id:1},{name:1,id:2}];
// 传入一个数组
// 按照特定方式格式化
function sortArr(arr, str) {
var _arr = [],
_t = [],
// 临时的变量
_tmp;
// 按照特定的参数将数组排序将具有相同值得排在一起
arr = arr.sort(function(a, b) {
var s = a[str],
t = b[str];
return s < t ? -1 : 1;
});
if ( arr.length ){
_tmp = arr[0][str];
}
// console.log( arr );
// 将相同类别的对象添加到统一个数组
for (var i in arr) {
console.log( _tmp);
if ( arr[i][str] === _tmp ){
console.log(_tmp)
_t.push( arr[i] );
} else {
_tmp = arr[i][str];
_arr.push( _t );
_t = [arr[i]];
}
}
// 将最后的内容推出新数组
_arr.push( _t );
return _arr;
}
var kk = sortArr( arr, 'name');
kk = [
[
{
"name": 1,
"id": 1
},
{
"name": 1,
"id": 2
}
],
[
{
"name": 2,
"id": 3
},
{
"name": 2,
"id": 4
}
],
[
{
"name": 3,
"id": 5
},
{
"name": 3,
"id": 6
}
]
]
1.10 判断电脑还是手机登录
//第一种
window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? "https://www.honestdo.com/" : "http://news.baidu.com/";
//第二种办法
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
document.writeln("phone");
} else {
document.writeln("pc");
}
}
1.11 循环创建layui时间控件
layui.use(['form', 'layer', 'jquery', 'laydate'], function () {
var form = layui.form
, $ = layui.jquery
, layer = layui.layer
, laydate = layui.laydate;
//渲染时间控件
function timeRender(){
lay('.meetingTime').each(function() {//循环渲染
laydate.render({
elem : this
, type : 'datetime'
, trigger : 'click'
});
});
//在每次动态生成laydate组件时, laydate框架会给input输入框增加一个lay-key="1",
//这样就导致了多个laydate 的inpute框都有lay-key="1"这个属性。导致时间控件不起作用，
//需要把动态生成的lay-key属性删除
$(".meetingTime").removeAttr("lay-key");
}
//页面加载的时候对已经有的控件进行初始化
timeRender();
});
1.12 监听视频播放
//视频加载后获取视频的长度
var elevideo = document.getElementById("video");
elevideo.addEventListener('loadedmetadata', function () { //加载数据
//视频的总长度
console.log(elevideo.duration);
//currentTime在谷歌浏览器上无法成功，因为谷歌浏览器的视频必须是http开头的src，否则无法设置currentTime
// elevideo.currentTime = 20;
//elevideo.play();
});
//视频开始播放
elevideo.addEventListener('play', function () { //播放开始执行的函数
console.log("开始播放");
});
// 视频正在播放中
elevideo.addEventListener('playing', function () { //播放中
console.log("播放中");
});
//视频加载中
elevideo.addEventListener('waiting', function () { //加载
console.log("加载中");
});
//视频暂停播放
elevideo.addEventListener('pause', function () { //暂停开始执行的函数
console.log("暂停播放");
});
//视频结束播放
elevideo.addEventListener('ended', function () { //结束
console.log("播放结束");
}, false);
$("#btn").click(function(){
//elevideo.currentTime = 5;
})
$("#video").on("timeupdate",function(){
$("#textInfo").text("当前播放时间:"+parseInt(this.currentTime) + "s");
//console.log(this.currentTime);
//console.log(this.duration);
})
//禁止视频的右键功能
$('#video').bind('contextmenu',function() { return false; });
//禁止页面右键及F12，但是浏览器也有办法打开F12，此方法只能对不懂的人又用，懂得都知道这个没什么用
document.oncontextmenu = function () { return false; };
document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
event.keyCode = 0;
event.returnValue = false;
return false;
}
};
1.13 浏览器窗口获取、失去焦点监听(附带是否切屏代码)
window.onblur = function () {
document.title = "小伙不要走，我要和你对决";
}
window.onfocus = function () {
document.title = "亲，欢迎你回来";
}
//切屏判断代码
var hiddenProperty = 'hidden' in document ? 'hidden' :
'webkitHidden' in document ? 'webkitHidden' :
'mozHidden' in document ? 'mozHidden' :
null;
var g_num = 0;//时间
var g_index = 0;//次数
var g_time;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
if (!document[hiddenProperty]) {
g_index++;
clearInterval(g_time);
if(g_index == 3){
alert("切出次数达到3次，已自动提交。");
}else{
alert("你已经切出去"+g_index+"次，本次切出去时间为"+g_num+"s，达到3次将自动提交。");
}
}else{
g_num = 0;
g_time = setInterval(function(){
g_num++;
},1000)
}
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
1.14 身份证格式校验
function isCnNewID(cid){
var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];//加权因子
var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2];//校验码
if(/^\d{17}\d|x$/i.test(cid)){
var sum = 0, idx;
for(var i = 0; i < cid.length - 1; i++){
// 对前17位数字与权值乘积求和
sum += parseInt(cid.substr(i, 1), 10) * arrExp[i];
}
// 计算模（固定算法）
idx = sum % 11;
// 检验第18为是否与校验码相等
return arrValid[idx] == cid.substr(17, 1).toUpperCase();
}else{
return false;
}
}
1.15 微信浏览器校验
function userAgentWx() {
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
// 这里警告框会阻塞当前页面继续加载
alert('请在微信客户端访问本页面');
}
}
二、css部分
2.1 屏蔽标签的选中效果
.main{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
2.2 滚动条样式修改
.menuList::-webkit-scrollbar{
height:8px !important
}
.menuList::-webkit-scrollbar{
width:10px;
height:10px;
}
.menuList::-webkit-scrollbar-thumb{
border-radius:10px;
background-color:#02adf7;
}
.menuList::-webkit-scrollbar-track{
background-color:#02adf7;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
}
2.3 翻转效果
<div class="par">
<div class="container">
<div class="one hide">隐藏在背后的元素</div>
<div class="two show">初始显示在前面的元素</div>
</div>
</div>
//js
setInterval(function(){
if($(".container").css("transform") != "none"){
$(".container").attr("style","transform");
}else{
$(".container").css("transform","rotateX(180deg)");
}
},1000)
//css
*{ margin: 0; padding: 0; box-sizing: border-box; }
.container, .one, .two{ width: 100px; height: 100px; }
.container{ position: relative; transition: 1s; transform-style: preserve-3d; }
.container:hover { transform: rotateX(180deg); }
.one{ position: absolute; top: 0; background: red; transform: rotateX(180deg);backface-visibility: hidden;}/*两个元素的位置一致,把背面隐藏起来,背面的元素翻转过来*/
.two{ position: absolute; top: 0; background: yellow;backface-visibility: hidden;}
2.4 文本内容超出多行隐藏
.title{
width: 100%;
overflow: hidden;
text-overflow: ellipsis; //溢出用省略号显示
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
-webkit-line-clamp: 2; //超出两行隐藏
-webkit-box-orient: vertical; // 从上到下垂直排列子元素
}
三、小程序
3.1 获取元素节点信息
//创建SelectorQuery查询对象
let query = wx.createSelectorQuery()
//第一个匹配节点
query.select(queryString)
//所有匹配节点
query.selectAll(queryString)
//queryString 类型
ID选择器：#the-id
class选择器（可以连续指定多个）：.a-class.another-class
子元素选择器：.the-parent > .the-child
后代选择器：.the-ancestor .the-descendant
跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant
多选择器的并集：#a-node, .some-other-nodes
3.2 下拉刷新配置
//json中配置
"enablePullDownRefresh": true // 请注意是true，不是"true"字符串，
// 部分开发者发现设置了还是无效，
// 可能是因为设置的"enablePullDownRefresh": "true"
//backgroundTextStyle配置 支持 dark/light 下拉刷新时显示的三个点闪烁的动画
"backgroundTextStyle": "dark"
//停止刷新动效
wx.stopPullDownRefresh();
//下拉刷新回调方法 js中一般都有这个方法定义
onPullDownRefresh: function () {
console.log('onPullDownRefresh')
},
3.3 动态修改数组对象的值
// pages/nav/nav.js
Page({
/**
* 页面的初始数据
*/
data: {
students: [
{
name: '张三',
number: '1234'
},
{
name: '李四',
number: '1111'
},
{
name: '王二狗',
number: '6666'
}
]
},
changeNumber: function (e) {
let index = 2;
let change = "students["+ index +"].number";
this.setData({
[change]: '9999'
})
}
})
3.4 tabBar菜单右上角显示内容
//添加内容显示
wx.setTabBarBadge({
index: 1, //标志添加位置 代表哪个tabbar（从0开始）
text: "" + num + "" //显示的内容
})
//移除内容显示
wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的标志
index: 1,
})
3.5 跳转带参过长加密与解密
var str = 'https://www.baidu.com/123?id=111'
//父组件加密
var encodeUrlParameter = encodeURIComponent(str)
console.log(encodeUrlParameter);
//子组件解密
var urlParameter = decodeURIComponent(encodeUrlParameter);
console.log(urlParameter);
3.6 微信小程序显示富文本编辑器内容且支持内容中的a标签点击事件
//如果只显示富文本编辑器内容使用小程序的rich-text标签
<rich-text :nodes="html"></rich-text>
//如果要保留a标签点击事件使用mp-html组件
<mpHtml :content="html" @linktap="linkTap"></mpHtml>
//通过npm install mp-html下载依赖 然后引入依赖
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
//如果主包过大，建议把依赖里面的uni-app/components/mp-html/mp-html放入分包进行引入
四、VUE
4.1 表单rules校验手机号，邮箱等
rules: {
mobile: [
{ required: true, message: "手机号不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
],
password: [
{ required: true, message: "密码不能为空", trigger: "blur" },
{ min: 5, max: 20, message: '密码长度必须介于 5 和 20 之间', trigger: 'blur' }
],
email: [
{
type: "email",
message: "'请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
}
4.2 清除rules表单校验提示文字(切换登录方式)
this.$refs['loginForm'].clearValidate();
4.3 点击按钮复制文字或图片
//复制文字
copyLinkAddress(){
const ele = document.createElement('input')
// 设置元素内容
ele.setAttribute('value', '复制的内容')
// 将元素插入页面进行调用
document.body.appendChild(ele)
// 复制内容
ele.select()
// 将内容复制到剪贴板
document.execCommand('copy')
// 删除创建元素
document.body.removeChild(ele)
this.$message.success("内容已复制到剪切板")
}
//复制图片
copyQrCode(){
let container = this.$refs.qrCodeDiv.childNodes[1]
let myBlob = this.base64ToBlob(container.getAttribute('src'))
//navigator.clipboard只能在本地localhost 、127.0.0.1 或者 https 协议下使用，否则navigator没有clipboard方法。
if (navigator.clipboard == undefined){
this.$message.error("请在https协议下操作");
}else{
navigator.clipboard.write([new window.ClipboardItem({ [myBlob.type]: myBlob })])
this.$message.success("复制二维码成功")
}
},
//base64转Blob
base64ToBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
注意：上面container 是qrcodejs2生成的二维码，看结构通过childNodes[1]直接获取img标签
4.4 el-table序号处理显示
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span v-text="getIndex(scope.$index)"> </span>
</template>
</el-table-column>
//方法pageNum:第几页 pageSize:每页显示数量 $index:当前页第几个
getIndex($index){
return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
},
4.5 el-table固定表头无线滑动加载
//需要使用到el-table-infinite-scroll滑动组件
//命令：npm install --save el-table-infinite-scroll@1.0.10 最新版本引入有问题，需要固定版本号
//全局引入 main.js里面
import Vue from "vue"
import elTableInfiniteScroll from 'el-table-infinite-scroll'
Vue.use(elTableInfiniteScroll);
//页面
<el-table :data="userList"
v-el-table-infinite-scroll="load"
:infinite-scroll-disabled="isDisabled"
height="210px"
style="overflow:auto;">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="试卷名称" align="center" key="userName" prop="userName"
:show-overflow-tooltip="true" />
<el-table-column label="试卷类型" align="center" key="testType" prop="testType"
:show-overflow-tooltip="true" />
<el-table-column label="创建人" align="center" key="phonenumber" prop="phonenumber" width="120" />
</el-table>
//方法
data() {
return {
// 总条数
total: 20,
userList: [],
isDisabled:false,
}
},
created() {
this.getList()
},
methods: {
//获取数据
getList() {
for(let i = 0;i<5;i++){
var mm = {
userName: "张三"+i,
testType: "考试试卷"+i
}
this.userList.push(mm)
}
},
//监听滚动
load(){
if (this.isDisabled) return;
if (this.userList.length > this.total) {//最后一页
this.isDisabled = true
} else {
this.getList()
}
},
},
4.6 el-table数据回显勾选
//回复勾选
setTimeout(function () {//加载数据方法中调用，延时是当数据渲染完成后才能勾选
that.checkFunction()
}, 500)
checkFunction() {
let list = []
this.userList.forEach(val => {
if (val.examinerExaminationPaperId != null) {
list.push(val)
}
})
if (list) {
list.forEach((row) => {
this.$refs.dataTable.toggleRowSelection(row, true)
})
}
},
4.7 el-table勾选调用接口及翻页显示已勾选的
//表格
<el-table ref="alloatUserTable" v-loading="loading" :data="recordList" @select="handleSelectionChange" @select-all="handleSelectAll">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="姓名" align="center" prop="nickName" />
<el-table-column label="电话" align="center" prop="phonenumber" />
<el-table-column label="性别" align="center" key="sex" prop="sex">
<template slot-scope="scope">
<span>{{ scope.row.sex == 0 ? '男' : '女' }}</span>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" @pagination="getList" />
//-------js
/** 查询列表数据 */
getList() {
this.loading = true;
listExaminationAllotUser(this.queryParams).then(response => {
this.recordList = response.rows;
this.total = response.total;
this.loading = false;
this.ids = []
this.$nextTick(() => {
for (let i = 0; i < this.recordList.length; i++) {//当前页数据是否需要勾选
if (this.recordList[i].examinationId != null) {
this.$refs.alloatUserTable.toggleRowSelection(this.recordList[i], true)
this.ids[this.ids.length] = this.recordList[i].userId//存入ids
}
}
})
});
},
// 多选框选中数据
handleSelectionChange(rows, row){
if (this.ids.find((item) => item == row.userId)){//勾选的是否在ids中
cancelAssignedExaminees({ userId: row.userId, examinationId: this.queryParams.examinationId }).then(response => {
this.msgSuccess("取消分配成功");
this.getList();
});
}else{
assignedExaminees({ userId: row.userId, examinationId: this.queryParams.examinationId }).then(response => {
this.msgSuccess("分配成功");
this.getList();
});
}
},
//全选
handleSelectAll(rows){
if (rows.length){
for (var i = 0; i < rows.length;i++){
assignedExaminees({ userId: rows[i].userId, examinationId: this.queryParams.examinationId }).then(response => {
this.msgSuccess("分配成功");
});
}
this.getList();
}else{
for (var i = 0; i < this.ids.length; i++ ){
cancelAssignedExaminees({ userId: this.ids[i], examinationId: this.queryParams.examinationId }).then(response => {
this.msgSuccess("取消分配成功");
});
}
this.getList();
}
},
4.8 子组件监听父组件传值更新
//监听函数
watch: {
examinationPaperId(newValue, oldValue) {//examinationPaperId为监听的值
this.queryParams.examinationPaperId = newValue
this.handleQuery()
},
examinerUserId(newValue, oldValue) {
this.queryParams.examinerUserId = newValue
this.handleQuery()
}
}
4.9 el-table实现单选
<el-table ref="dataTable"
:data="userList"
@select="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="试卷名称" align="center" prop="examinationPaperName"
:show-overflow-tooltip="true"/>
<el-table-column label="试卷类型" align="center" prop="examinationPaperClassifyName"
:show-overflow-tooltip="true" />
<el-table-column label="总分" align="center" prop="totalScore" :show-overflow-tooltip="true" />
<!-- <el-table-column label="创建人" align="center" prop="createBy" width="120" /> -->
</el-table>
//单选处理
methods:{
//selection为勾选的内容数组，row为当前勾选或取消的对象
handleSelectionChange(selection, row) {
if (selection.length > 1) {
//清除前面勾选的
this.$refs.dataTable.clearSelection()
this.$refs.dataTable.toggleRowSelection(selection.pop())
this.ids = row.examinationPaperId
} else if (selection.length == 1){
this.ids = row.examinationPaperId
}else{
this.ids = ''
}
},
}
//css 隐藏头部全选框 因为使用的scoped(样式只在当前页面生效)，需要使用深度选择器/deep/
<style lang="less" scoped>
/deep/ thead .el-table-column--selection .cell {
display: none;
}
</style>
4.10 el-tree回显选中效果
//获取tree数据后，需要根据条件默认勾选某一结点，并高亮显示
<el-tree :load="data"
:props="defaultProps"
node-key="id"
ref="tree"
:check-on-click-node="true"
:default-expanded-keys="treeExpandelKeys"
highlight-current="true"
check-strictly="true" lazy></el-tree>
//获取数据方法中使用setCurrentKey(通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性)进行高亮设置
setTimeout(function(){//高亮需要延时处理
this.$nextTick(function(){
//setCurrentKey是必须设置node-key；对应数据中的属性
this.$refs.tree.setCurrentKey(this.processId)
})
},600)
//**注意**
// 此处使用的是懒加载存在一个问题，首次加载的是一级节点，如果需要二级三级选中，需要设置treeExpandelKeys(默认展开的节点的 key 的数组)，通过push循环把一级节点的数据push进入treeExpandelKeys中(只支持了一二级节点高亮回显)展开二级。然后加入上面的代码。
4.11 动态table输入框必填校验
//meterReadingRecords为表格数据对应的对象名
<el-table-column
label="*本次读数">
<template v-slot="{$index,row}">
<el-form-item :prop="'meterReadingRecords.' + $index + '.thisTimeRead'" :rules="{
required: true,
message: '值不能为空',
trigger: 'blur',
}">
<el-input v-model="row.thisTimeRead" placeholder="请输入" style="width:100%;"></el-input>
</el-form-item>
</template>
</el-table-column>
4.12 el-table勾选框实现单选效果
<el-table
ref="multipleTable"
:data="tableData"
highlight-current-row
style="width: 100%"
@select="handleSelectionChange">
</el-table>
//选择
handleSelectionChange(val,row){
let that = this;
let obj = []
if (val) {
if (val.length > 1) {
that.$refs.multipleTable.clearSelection();
that.$refs.multipleTable.toggleRowSelection(val.pop());
}
obj[0] = row;
} else {
that.$refs.multipleTable.clearSelection();
obj = null;
}
this.$emit("select",obj)
},
//css隐藏全选框
:deep(){
.el-table__header-wrapper .el-checkbox {
display: none !important;
}
}
4.13 element plus 的日期范围控件限制选择区间
<el-date-picker
v-model="time"
type="daterange"
value-format="YYYY-MM-DD"
range-separator="至"
:disabled-date="disabledDate"
@calendar-change="handleChange"
@focus="handleFocus"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
handleChange(val){
const [pointDay] = val
this.pickDay = pointDay //点击的第一个时间
},
handleFocus(){
this.pickDay = null //清空
},
disabledDate(time){
const limitTime = 1000 * 60 * 60 * 24 * 30
if(this.pickDay){
return (
// time.getTime() < this.pickDay.getTime() - limitTime ||
time.getTime() > this.pickDay.getTime() + limitTime //限制30天
// || time.getTime() > Date.now()
)
}else{
// return time.getTime() > Date.now() //未选择时间时只能选择不超过当天的日期
}
},
4.14 el-upload自定义上传
<el-upload
:file-list="form.paymentCertificate"
class="upload-demo"
acton="#"
:limit="10"
:before-upload="beforeUploadFile"
:http-request="fileInput"
:before-remove="removeFile"
>
<el-button type="text">上传</el-button>
</el-upload>
//附件上传
fileInput(file){
let formDate = new FormData()
formDate.append('file', file.file)
filesSubmit(formDate).then((row) => {
this.form.paymentCertificate.push(row.data)
})
},
//移除附件
removeFile(file,fileList){
this.form.paymentCertificate.splice(fileList.indexOf(file),1)
},
beforeUploadFile(file){
if((file.size / 1024 / 1024) > 10){
this.$message.warning("文件不能大于10M");
return false
}
let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
if(fileType !== "jpeg" && fileType !== "png"){
this.$message.warning("只能上传jpeg、png格式的文件")
return false
}
},
//针对要获取点击的是第几个上传附件按钮 通过on-change来处理
<el-upload
:file-list="row.contractFileList"
class="upload-demo"
acton="#"
:limit="10"
:before-upload="beforeUploadFile"
:http-request="fileInput"
:before-remove="removeFile"
:on-change="(file, fileList)=> {return onChange(file, fileList, $index)}"
v-if="!isShowText"
>
<el-button type="text">上传</el-button>
</el-upload>
onChange(file, fileList, index){
this.index = index
},
1398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
