怎样建设网站公司,wordpress tag 别名,淘宝客绑定网站备案号,网站建设的战略作用一般在后台管理系统中#xff0c;表单搜索框和表格的搭配是非常常见的#xff0c;如下所示#xff1a; 在该图中#xff0c;搜索框有五个#xff0c;分为了两行排列。但根据大多数的UI标准#xff0c;搜索框默认只显示一行#xff0c;多余的需要进行隐藏。此时的页面被…一般在后台管理系统中表单搜索框和表格的搭配是非常常见的如下所示 在该图中搜索框有五个分为了两行排列。但根据大多数的UI标准搜索框默认只显示一行多余的需要进行隐藏。此时的页面被上部分的搜索框和下部分的表格框所填充如果搜索框默认显示一行在展开下面行时搜索框高度变化势必要引起表格框高度的变化。此时就需要对上下两个div的高度进行计算。形成下图所示 1.搜索框收起状态可以看到搜索框的最右边有个向下的按钮
2.搜索框展开状态最右边方向键变为向上 可以看到此时表格的高度是跟随着搜索框的高度变动的两者始终保持占满整个屏幕。 光是这样还有欠缺在页面缩放的时候高度也应该跟着一起变动才行如下图所示将整个页面缩小了比例为67%但表单与表格依然撑满整个画面。 首先我们使用全局element-resize-detector监听DOM元素
npm install element-resize-detector创建mixin文件夹里面创建一个index.js该文件作为公共js使用所有需要用到表单表格自适应的直接引用该文件就好。
// 引入监听并使用
import elementResizeDetectorMaker from element-resize-detector;
export default {data() {return {tableHight: 0, // 表格高度searchShow: false, // 搜索表单多行隐显hight: 0, // pageHead高度}},mounted() {this.watchSize()},methods: {// 高度监听自适应表格watchSize() {this.$nextTick(() {let erd elementResizeDetectorMaker();// 页面高度监听erd.listenTo(this.$refs.pageTotal, () { let fullHeight document.body.offsetHeightlet tableEle document.querySelector(.el-table)// 表格toplet { top } tableEle.getBoundingClientRect()// 搜索框高度this.hight this.$refs.pageHead.offsetHeight 16// css变量定义// 注意这里的--height, 是给page.less文件的因为很多页面需要用到改样式所以都一起封装到一个文件中了下面会提到。this.$el.style.setProperty(--height, this.hight)this.tableHight fullHeight - top - 85 // 这个地方的85看各人情况可以做修改});})},}
}要想直接使用该代码表单表格所在的页面还需要做如下配置 index.vue
templatediv classpage-total refpageTotaldiv classpage-head refpageHeaddiv classhead-title表单表格高度自适应/div!-- 搜索表单 --div classhead-searchel-form refsearchForm classsearch-form :modelsearchForm label-width150px!-- 搜索框的第一排 --el-row!-- 这个位置放前四个搜索框下面这个按钮就是展开收起剪头 --el-button clicksearchShow !searchShow; watchSize() stylemargin-left:10px; :class[{el-icon-arrow-down: !searchShow},{el-icon-arrow-up: searchShow}]/el-button/el-row!-- 搜索框的第二排 --el-row v-showsearchShow/el-row/el-form/div/divdiv classpage-inner-content !-- 表格 --el-table :datatableData border stripe :heighttableHight!-- 表格内容 --/el-table/div/div
/templatescript
// 这里需要引用才可以生效喔
import mixin from ../mixin
export default {mixins: [mixin],data() {return {}}
}
/script
// 引入page.less
style langless scoped
import ../page.less;
/style下面的page.less的基础架构
.page-total{width: 100%;height: 100%;position: relative;background-color: #F5F5F6;padding: 16px;overflow: auto;.search-form{width: calc(100% - 165px);}.page-head{background-color: #fff;border-radius: 4px;padding: 0 16px;.head-search{display: flex;justify-content: space-between;}}.page-inner-content{// 这里的height变量是从mixin中获取的height: calc(100% - var(--height));background-color: #fff;margin-top: 16px;padding: 16px;border-radius: 4px;}
}注意page.lessinde.vuemixin三者之间的参数关联
