JS设置body-width为屏幕最大宽度(width自适应)

// 设置body-width与屏幕width一致(减去20px进行修正)
document.body.style.width = (window.screen.availWidth - 20) + "px";

摘录参考:
网页可见区域宽:document.body.clientWidth;
网页可见区域高:"+ document.body.clientHeight;
网页可见区域宽(包括边线和滚动条的宽):document.body.offsetWidth;
网页可见区域高(包括边线的宽):document.body.offsetHeight;
网页正文全文宽:document.body.scrollWidth;
网页正文全文高:document.body.scrollHeight;
网页被卷去的高(ff):document.body.scrollTop;
网页被卷去的高(ie):document.documentElement.scrollTop;
网页被卷去的左:document.body.scrollLeft;
网页正文部分上:window.screenTop;
网页正文部分左:window.screenLeft;
屏幕分辨率的高:window.screen.height;
屏幕分辨率的宽:window.screen.width;
屏幕可用工作区高度:window.screen.availHeight;
屏幕可用工作区宽度:window.screen.availWidth;
XX位彩色:window.screen.colorDepth;
像素/英寸:window.screen.deviceXDPI;

在Vue中使用Element UI的el-table组件时,可以通过以下几种方法来让el-table-column自适应内容的宽度: 1. 使用`min-width`和`width`属性: 设置`min-width`为一个较小的值,然后让`width`为`auto`。这样列会根据内容自动调整,但不会小于设定的最小宽度。 ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名" min-width="100" width="auto"> </el-table-column> <!-- 其他列 --> </el-table> ``` 2. 使用`show-overflow-tooltip`属性: 这个属性会在内容过长时显示一个tooltip,并自动调整列宽以适应内容。 ```html <el-table :data="tableData"> <el-table-column prop="description" label="描述" show-overflow-tooltip> </el-table-column> <!-- 其他列 --> </el-table> ``` 3. 使用`resize`事件: 监听表格的`resize`事件,并在事件触发时重新计算列宽。 ```html <template> <el-table :data="tableData" @resize="handleResize"> <el-table-column prop="address" label="地址" ref="addressColumn"> </el-table-column> <!-- 其他列 --> </el-table> </template> <script> export default { methods: { handleResize() { const column = this.$refs.addressColumn; if (column) { column.width = column.$el.clientWidth; } } } } </script> ``` 4. 使用`el-table`的`auto-resize`属性: 设置`auto-resize`为`true`,可以让表格在容器大小改变时自动调整列宽。 ```html <el-table :data="tableData" auto-resize> <!-- 列定义 --> </el-table> ``` 5. 自定义计算列宽: 在mounted钩子中,根据内容长度和字体大小计算每个单元格的宽度,然后设置给对应的列。 ```javascript mounted() { this.$nextTick(() => { const cells = this.$el.querySelectorAll('.el-table__body .cell'); cells.forEach(cell => { const text = cell.innerText; const width = this.getTextWidth(text) + 20; // 加20px作为padding cell.parentElement.style.width = width + 'px'; }); }); }, methods: { getTextWidth(text) { const canvas = this.getTextWidth.canvas || (this.getTextWidth.canvas = document.createElement('canvas')); const context = canvas.getContext('2d'); context.font = '14px Arial'; const metrics = context.measureText(text); return metrics.width; } } ``` 这些方法可以根据具体需求和场景选择使用或组合使用,以达到最佳的表格展示效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值