1.原生js实现表格分页查询功能
/**
* 2019/8/20更新
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
function goPage(pno,psize){
var itable = document.getElementById("idData");
var num = itable.rows.length;//表格所有行数(所有记录数)
//console.log(num);
var totalPage = 0;//总页数
var pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize > parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
var startRow = (currentPage - 1) * pageSize+1;//开始显示的行 31
var endRow = currentPage * pageSize;//结束显示的行 40
endRow = (endRow > num)? num : endRow; //40
// console.log(endRow);
//遍历显示数据实现分页
for(var i=1;i<(num+1);i++){
var irow = itable.rows[i-1];
if(i>=startRow && i<=endRow){
irow.style.display = "table-row";
//irow.cells.style.width = "11%";
}else{
irow.style.display = "none";
//irow.cells.style.width = "11%";
}
}
//var pageEnd = document.getElementById("pageEnd");
var tempStr = "共"+num+"条数据 分"+totalPage+"页 当前第"+currentPage+"页 ";
if(currentPage>1){
tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(1)+","+psize+")\">首页</a> ";
tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页</a> "
}else{
tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >首页</a> ";
tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >上一页</a> ";
}
if(currentPage<totalPage){
tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a> ";
tempStr += "<a href=\"#\" class=\"btn btn-sm btn-primary\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a> ";
}else{
tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >下一页</a> ";
tempStr += "<a href=\"#\" class=\"btn btn-sm btn-metal\" >尾页</a> ";
}
tempStr +="跳转至";
tempStr +="<select class='' style='width:60px' οnchange='goPage(this.value,"+psize+")'>";
tempStr +="<option></option>"
for(var j=1;j<=totalPage;j++){
tempStr +="<option value='"+j+"' >第"+ j +"页</option>";
}
tempStr +="</select>";
document.getElementById("barcon").innerHTML = tempStr;
}
2.伪数组转换成真数组 1.创建一个空数据,遍历放进空数组中 2.使用slice方法：利用Array原型对象的slice方法，配合apply，将slice中的this指向伪数组
var ali = document.getElementsByTagName('li');
console.log(ali); // [li, li, li, li]
// ali.push("hello"); // TypeError: ali.push is not a function
var arr = Array.prototype.slice.apply(ali);
arr.push("hello");
console.log(arr); // [li, li, li, li, "hello"]
3.利用ES6提供的Array的from方法
var ali = document.getElementsByTagName('li');
console.log(ali); // [li, li, li, li]
// ali.push("hello"); // TypeError: ali.push is not a function
var arr = Array.from(ali);
arr.push("hello");
console.log(arr); // [li, li, li, li, "hello"]
4.利用ES6提供的展开运算符（…）
var ali = document.getElementsByTagName('li');
console.log(ali); // [li, li, li, li]
// ali.push("hello"); // TypeError: ali.push is not a function
var arr = [...ali];
arr.push("hello");
console.log(arr); // [li, li, li, li, "hello"]
3.vue中v-for遍历循环对象 v-for=(val,key,i) in user val:值 key:键名 i: 索引
4.表格单元格宽度设置为百分比,如何设置超出显示省略号,不管怎么设置还是会被内容撑开
可以在 table上加上一个样式:
table-layout: fixed;/*列宽由表格宽度和列宽度设定。*/
5.text-align对行内块元素有作用
6.elementui中upload组件限制上传文件类型
1.使用accept属性，限制上传类型（好处是，在点击上传的时候会将其他类型的文件过滤掉）
<el-upload
class="upload-demo"
drag
action="（服务器地址）"
:on-change="handleChange"
:headers="headers"
:data="listData"
name="list"
ref="upload"
accept=".xls,.xlsx"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将xls/xlsx文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
- 使用before-upload，好处是在你将其他类型的文件上传后，会有提示信息，提示你文件类型不对
<el-upload
class="upload-demo"
drag
action="（服务器地址）"
:on-change="handleChange"
:headers="headers"
:data="listData"
name="list"
ref="upload"
:before-upload="handleBefore"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将xls/xlsx文件拖到此处，或<em>点击上传</em>
</div>
</el-upload>
handleBefore(file) {
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension = testmsg == 'xls'
const extension2 = testmsg == 'xlsx'
if (!extension && !extension2) {
this.$message({
message: '上传文件只能是 xls、xlsx格式!',
type: 'warning'
})
}
return extension || extension2
},
7.vue中图片预览可缩放、拖拽
预览:
1.可以使用elementui中的image组件 2.可以使用elementui中的弹框组件,弹窗内引入图片 动态给图片地址
<el-dialog
title="图片展示"
:visible.sync="enlargeDialogVisible"
width="800"
>
<div ref="box" style="position:relative;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;overflow: hidden;" @mousewheel.prevent="rollImg($event)">
<img id="enlargePic" ref="imgDiv" :src="currentImg" alt="" style="position: absolute" @mousedown="move($event)">
</div>
</el-dialog>
缩放:
// 缩放图片
rollImg(e) {
e.stopPropagation()
this.zoomVal += e.wheelDelta / 1200
if (this.zoomVal >= 0.2) {
this.$refs.imgDiv.style.transform = `scale(${this.zoomVal})`
} else {
this.zoomVal = 0.2
this.$refs.imgDiv.style.transform = `scale(${this.zoomVal})`
return false
}
},
拖拽
// 拖拽缩放的图片
move(e) {
e.preventDefault()
e.stopPropagation()
// 获取元素
var left = this.$refs.box
var img = this.$refs.imgDiv
var x = e.pageX - img.offsetLeft
var y = e.pageY - img.offsetTop
// 添加鼠标移动事件
left.addEventListener('mousemove', move)
function move(e) {
img.style.left = e.pageX - x + 'px'
img.style.top = e.pageY - y + 'px'
}
// 添加鼠标抬起事件，鼠标抬起，将事件移除
img.addEventListener('mouseup', function() {
left.removeEventListener('mousemove', move)
})
// 鼠标离开父级元素，把事件移除
left.addEventListener('mouseout', function() {
left.removeEventListener('mousemove', move)
})
},
在弹框关闭的时候:
this.$refs.imgDiv.style.transform = `scale(1)`
this.$refs.imgDiv.style.left = null
this.$refs.imgDiv.style.top = null
this.zoomVal = 1
