便利贴--22{Avue表格自定义以及适应高度}
store-只需要给自己的表格加上class
<avue-crud
class=“tablesss”
这加上class
// import {getStore, setStore} from '@/util/store'
// import {getDictionary} from '@/api/system/dict'
let screenSizes = {
w: window.screen.width,
h: window.screen.height
};
let innerWH = {
innerWidth: window.innerWidth,
innerHeight: window.innerHeight
};
const control = {
state: {
clearOtherBut: {
refreshBtn: false,
columnBtn: false,
searchShowBtn: false,
filterBtn: false,
addBtn: false,
editBtn: false,
viewBtn: false,
delBtn: false,
searchIndex: 6, //收缩展示数量
searchIcon: true, //搜索是否收缩
height: window.screen.height //初始高度
},
changePageSize: {
pageSize: 15,
currentPage: 1,
total: 0,
pageSizes: [15, 30, 50, 100]
},
windowWidth: innerWH.innerWidth,
windowHeight: innerWH.innerHeight,
tableWindowHeight: innerWH.innerHeight,
heightTimesOut: "",
table_height: "",
butState: "",
oldOpens: "",
screenSize: screenSizes.w <= 1366 && screenSizes.h <= 768,
screenHeight: 1000,
searchOpen: {
searchIndex: 6, //收缩展示数量
searchIcon: true, //搜索是否收缩
height: window.screen.height //初始高度
}
},
actions: {
WHchangeHight({
state,
commit
}, data) {
if (data.fn) {
if (!state.heightTimesOut) {
data.fn(state.windowHeight);
} else {
state.heightTimesOut = setTimeout(() => {
clearTimeout(state.heightTimesOut);
state.heightTimesOut = "";
data.fn(state.windowHeight);
}, 500);
}
}
},
TABLE_CHANGEBUTPOSITION({
state,
commit,
dispatch
}, data) {
let table = document.getElementsByClassName("tablesss")[0];
let heard = table.getElementsByClassName("avue-crud__search")[0]; //获取搜索的长度
let buts = table.getElementsByClassName("avue-form__menu--center")[0];
let Open = buts.getElementsByClassName("el-button--text")[0];
let butsheight = heard.clientHeight;
let other = data.otherclass || [];
// buts.style.transition = "all 0.1s";
if (buts) {
buts.style.top = butsheight - 3 + "px";
}
if (other && state.windowWidth >= 1024) {
for (let k in other) {
let otherbuts = document.getElementsByClassName(other[k])[0];
// otherbuts.style.transition = "all 0.1s";
if (otherbuts) {
otherbuts.style.top = butsheight + 26 + "px";
}
}
}
// Open.style.transition = "all 0.1s";
// Open.style.top = -(butsheight + 4) + "px";
// 添加事件
if (Open) {
Open.style.top = (state.screenSize ? 125 : 140) + "px";
Open.onclick = function (e) {
// changedom(e.srcElement.innerText);
//固定高度
//调用改变高度
if (e.srcElement.innerText == "展 开") {
state.tableWindowHeight += 1;
} else {
state.tableWindowHeight -= 1;
}
// commit("setButOpens", e.srcElement.innerText);
};
}
},
TABLE_CHANGEHEIGHT({
state,
commit
}, data) {
let h = +state.windowHeight - (+data.searchHeight + +data.flowHeight);
console.log(h);
state.table_height = h;
// commit("settable_height", h);
},
changeZoom({
state,
commit,
dispatch
}, data) {
if (window.innerWidth <= 1396 && window.innerHeight <= 798) {
// var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
// console.log(devicewidth)
let devicewidth = 1143;
var scale = devicewidth / 1366; // 分母——设计稿的尺寸
document.body.style.zoom = scale; //放大缩小相应倍数
// console.log("应用1366*768")
} else {
if (document.body.style.zoom != 1) {
document.body.style.zoom = 1;
// console.log("还原缩放")
}
}
// return;
let usheight = 0;
//监听可视高度
Object.defineProperty(state, "tableWindowHeight", {
set: function (key, value) {
// //此处拦截了设置请求
// window.console.log(key, value, "tableWindowHeight");
usheight = key;
let d = {
fn: function (h) {
let doit = (height, val) => {
let table = document.getElementsByClassName("tablesss");
// console.log(table[0]);
if (table[0]) {
//有需要调整的表格
let heard = table[0].getElementsByClassName(
"avue-crud__search"
);
let tip = document.getElementsByClassName("avue-crud__tip")[0];
let usNum = state.screenSize ? 165 : 302;
if (!tip) {
// console.log("没有tip")
usNum = usNum - 50;
}
let pagination = document.getElementsByClassName("avue-crud__pagination")[0];
if (!pagination) {
// console.log("没有分页")
usNum = usNum - 45;
}
let nav_scroll = document.getElementsByClassName("el-tabs__nav-scroll");
if (nav_scroll[1]) {
// console.log("有额外标签栏")
usNum = usNum + 55;
}
let hs = height || h;
let overHeight = +hs - (+heard[0].clientHeight + +usNum);
// console.log(overHeight, heard[0].clientHeight, usNum);
let fromDom = document.getElementsByClassName(
"el-table--fit"
);
if (fromDom) {
let ifsize = fromDom.length;
// console.log("页面表格数量：", ifsize)
for (let ifrom = 0; ifrom < ifsize; ifrom++) {
// fromDom[ifrom].style.transition = "height 0.1s";
fromDom[ifrom].style.maxHeight = overHeight + "px";
fromDom[ifrom].style.height = overHeight + "px";
}
}
let d = {
otherclass: ["downSFZ"],
haveOpen: true
};
dispatch("TABLE_CHANGEBUTPOSITION", d);
}
return;
};
// if (that.onceTableChange == 1) {
// //解决第一次未渲染成功会报错的问题
// that.onceTableChange++;
// console.log(that.onceTableChange);
// commit("checkDomHeight", {
// domName: "getElementsByClassName",
// name: "el-table--fit",
// fn: function() {
// that.$nextTick(() => {
// setTimeout(() => {
// doit(window.innerHeight, "once");
// }, 200);
// });
// }
// });
// } else {
doit(window.innerHeight);
// }
}
};
dispatch("WHchangeHight", d);
return
// tablesss
// class="tablesss"
$store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
$store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : '',
// searchIndex: 6, //收缩展示数量
// searchIcon: true, //搜索是否收缩
// ...this.$store.state.control.searchOpen,
// height: "auto",
// 初始化位置， 放入mounted, 以及放入onload的获取数据后
this.$store.commit("setWindowSizeHeightAdd");
},
get: function () {
// console.log('get!', usheight);
return usheight;
}
});
},
MOUNTED_TABLE_SIZE({
state,
commit,
dispatch
}, data) {
let d = {
otherclass: ["downSFZ"],
haveOpen: true,
from: "mounted"
};
// 开始就适应高度
commit("setWindowSizeHeightAdd");
// dispatch("TABLE_CHANGEBUTPOSITION", d);
}
},
mutations: {
setWindowSize: (state, data) => {
state.windowWidth = data.innerWidth;
state.windowHeight = data.innerHeight;
// console.log(state.windowHeight, "state.windowHeight")
},
setWindowSizeHeight: (state, data) => {
state.tableWindowHeight = data;
// console.log(state.tableWindowHeight, "state.tableWindowHeight")
},
setWindowSizeHeightAdd: (state, data) => {
setTimeout(() => {
state.tableWindowHeight += 1;
}, 0);
},
setButOpens(state, data) {
state.butState = data;
},
setOldOpens(state, data) {
state.oldOpens = data;
state.oldOpens = data;
},
setScreenSize(state, data) {
state.screenSize = data.w <= 1366 && data.h <= 768 ? 1366 : false;
state.screenHeight = data.h;
},
checkDomHeight(state, data) {
// 声明定时器
var timer = null;
// 检查dom是否执行完成
function checkDom() {
let dom = document[data.domName](data.name);
console.log(dom[0].style.height, "height");
if (dom[0].style.height) {
// 执行dom加载完成后的操作
// 清除定时器
if (!timer) {
clearTimeout(timer);
}
if (data.fn) {
//回调函数
data.fn(dom);
return;
} else {
return dom;
}
} else {
// 自我调用
timer = setTimeout(checkDom, 200);
}
}
// 首次执行
checkDom();
}
}
};
export default control;
全局监听尺寸–在系统初始化的时候运行
import _this from "../main";
// 设置 init 函数
function init() {
if (_this) {
let innerWH = {
innerWidth: window.innerWidth,
innerHeight: window.innerHeight
// innerWidth: document.documentElement.clientWidth,
// innerHeight: document.documentElement.clientHeight,
};
_this.$store.commit("setWindowSize", innerWH);
_this.$store.commit("setWindowSizeHeight", innerWH.innerHeight);
_this.$store.commit("setScreenSize", {
w: window.screen.width,
h: window.screen.height
});
// console.log("第下次判断屏幕分辨率");
// console.log(' window.innerWidth', window.innerWidth);
// console.log(' window.innerHeight', window.innerHeight);
_this.$store.dispatch("changeZoom");
}
}
// 节流 ms 触发间隔毫秒
var ms = 300;
var lastClick = Date.now() - ms;
// 初始化
setTimeout(() => {
init();
}, 500);
// 改变窗口大小时重新设置 rem
// window.onresize = function () {
// // 节流
// if (Date.now() - lastClick >= ms) {
// init();
// lastClick = Date.now();
// }
// }
window.addEventListener(
"resize",
() => {
// 节流
if (Date.now() - lastClick >= ms) {
init();
lastClick = Date.now();
}
},
false
);
我使用的样式
.tooRowSearch1 {
position: relative;
// .avue-form__group {
// position: relative;
// z-index: 100;
// }
}
.tooRowSearch1
.avue-crud__search
.avue-form__group.avue-form__group--flex
.avue-form__menu--center {
width: 222px !important;
// width: 264px !important;
// position: absolute !important;
// right: 0 !important;
// top: 126px !important;
// z-index: 100 !important;
// width: 264px;
position: absolute;
right: -8px;
top: 68px;
z-index: 100;
.el-button.el-button--text.el-button--small {
position: fixed;
top: 128px;
right: 46px;
}
}
.tooRowSearch1 .el-card.is-never-shadow.avue-crud__search {
overflow: visible;
}
.smallSize {
//设置1366*768中的表格边距
//搜索框
.el-collapse .el-collapse-item {
padding-top: 0px !important;
.el-col {
margin-top: 2px;
margin-bottom: 8px;
}
.el-form-item--small.el-form-item {
margin-bottom: 10px;
.el-form-item__label {
width: auto !important;
}
}
}
.avue-crud__menu {
margin-bottom: 0 !important;
}
//选择选项横条
.avue-crud__tip {
.avue-crud__tip {
margin: 3px 0;
}
}
.el-card__body {
//卡片减少padding
padding: 8px !important;
.el-card__body {
padding: 0 8px 8px 8px !important;
}
}
//分页器
.avue-crud__pagination {
padding: 10px 0 5px 5px;
}
}
.normalSize {
//设置正常的表格边距
//搜索框
.el-collapse .el-collapse-item {
padding-top: 0px !important;
.el-col {
margin-bottom: 8px !important;
}
.el-form-item--small.el-form-item {
margin-bottom: 15px;
.el-form-item__label {
width: auto !important;
}
}
}
//选择选项横条
.avue-crud__tip {
.avue-crud__tip {
margin: 6px 0;
}
}
.el-card__body {
//卡片减少padding
padding: 8px !important;
}
//分页器
.avue-crud__pagination {
padding: 15px 0 5px 5px;
}
}
vue页面中watch备份
windowHeight() {
return;
let that = this;
that.option.height = that.screenHeight;
let d = {
fn: function (h) {
let doit = (height, val) => {
let table = document.getElementsByClassName("tablesss");
let heard = table[0].getElementsByClassName("avue-crud__search");
let usNum =
that.windowWidth <= 1376 || that.windowHeight <= 778 ? 170 : 302;
let hs = height || h;
let overHeight = +hs - (+heard[0].clientHeight + +usNum);
console.log(overHeight);
let fromDom = document.getElementsByClassName("el-table--fit")[0];
fromDom.style.transition = "height 0.1s";
fromDom.style.height = overHeight + "px";
let d = {
that: this,
otherclass: ["downSFZ"],
haveOpen: true,
};
that.$store.dispatch("TABLE_CHANGEBUTPOSITION", d);
};
if (that.onceTableChange == 1) {
//解决第一次未渲染成功会报错的问题
that.onceTableChange++;
console.log(that.onceTableChange);
that.$store.commit("checkDomHeight", {
domName: "getElementsByClassName",
name: "el-table--fit",
fn: function () {
that.$nextTick(() => {
setTimeout(() => {
doit(window.innerHeight, "once");
}, 200);
});
},
});
} else {
doit();
}
},
};
this.$store.dispatch("WHchangeHight", d); //为了节流
return
$store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
$store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : '',
// searchIndex: 6, //收缩展示数量
// searchIcon: true, //搜索是否收缩
// ...this.$store.state.control.searchOpen,
// height: "auto",
// 初始化位置， 放入mounted, 以及放入onload的获取数据后
this.$store.commit("setWindowSizeHeightAdd");
},
1742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
