DIV部分
<chart
? ref="taskChart"
? :theme="charts.theme"
? autoresize :options="charts.optionsu"
? @click="zydwclick"
? :style="{width:charts.width,height:charts.height}">
</chart>
<iframe width="100%" ref="mapIframe" class="rectCorner" id="zykhMapIframe" scrolling="no"
? ? ? ? :src="YZKH_URL" :height="ifram_height"
? ? ? ? frameborder="0">
</iframe>
data部分
charts:{
//div的高度
ifram_height:0,
//echarts的高度寬度
width:'100%',
height:"230px",}
//自動設(shè)置chart的高度
methods: {
RowResize() {
let me =this;
? const deviceHeight = document.documentElement.clientHeight
? const chartHeight = (Number(deviceHeight) *0.82) /2//兩個row
//計算echarts 的高度
? me.charts.height = chartHeight +'px';
//計算div部分的高度
? me.ifram_height = (Number(deviceHeight) *0.78) +'px'
},
在mountd里面調(diào)用
mounted() {
let me =this;
me.RowResize();
//監(jiān)視窗口發(fā)生變化再調(diào)用一次
window.onresize =function () {
me.RowResize();
}
獲取DOM的高度寬度公式
DOM可視高度/DOM最長的高度=計算比例
計算? table高度?
<Table border
? ? ? @on-sort-change="onSortChange"
? ? ? :columns="tableA.tableColumns"
? ? ? :data="tableA.tableData"
? ? ? :height="height"
? ? ? ref="currentRowTable"
? ? ? :percent="percent"
? ? ? style="white-space: nowrap;word-break: keep-all"
></Table>
data() {
return {
height:100,
//自動設(shè)置列表的高度
RowResize() {
let me =this;
? const deviceHeight = document.documentElement.clientHeight
? if (me.$refs.currentRowTable) {
me.height = Number(deviceHeight) *0.65
? }
},
let me =this
me.RowResize();
//監(jiān)聽窗口大小變化
window.onresize =function () {
me.RowResize();
}
