table列宽度自适应(el-table自适应宽度)

如何设置HTML页面自适应宽度的table(表格)（一）

将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigtree看来，比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——将大部分列宽用固定值设置，留下一列不设置宽度，将table的宽度设置为屏幕的百分比（譬如95%、98%等）。

table列宽度自适应(el-table自适应宽度)

table列宽度自适应(el-table自适应宽度)

例：

序号

分类A

分类B

名称

说明

作……在本例中，名为“说明”的列，内容比较长，个人认为可以将此列设置为浮动宽度列，用以自适应页面的宽度。

但是当该表格中出现长度比列幅宽的半角字符时，td的宽度会被内容撑破，应该如何解决呢？解决此问题的方法是：在明细行的td中，追加 ，这样做可以使半角连续字符强制换行，不至于撑破列宽。

例：

……应用此方法，针对设置了width宽度的td列可以解决，但是如果没有设置宽度的td列，是无法生效还是会被撑破td的，应该如何解决呢？解决此问题的方法是：在定义表格时，追加 ，这样做可以使半角连续字符强制换行，不至于撑破列宽。需要注意的是，使用此参数后，不要轻易在tr(行)或td(列)中加入height属性，会使table不再被内容撑出适合的高度。

例：

效果图

如何设置table的宽度自适应

table中添加样式 ，有用请采纳；//用样式比较规范；

12

34

5

将所有列设置为固定宽度，显然是不能满足此类要求的，但是若把全部的列都设置为百分比，恐怕在某些尺寸，或分辨率下，会变得很难看。在Bigtree看来，比较习惯于用如下的方式来处理——在表格列数不是很多的前提下——将大部分列宽用固定值设置，留下一列不设置宽度，将table的宽度设置为屏幕的百分比（譬如95%、98%等）。例：

如果网站结构主要由表格来定结构，那么只要把表格的宽度属性定义为，表格就会根据分辨率的不同自行调整宽度。内部的小表格也同样用百分比进行设置即可。

bootstrap table自适应内容宽度的方法如下：

使用class“table-responsive”

其中，表格需要加table样式。

表格里面的thead和tbody不能省略，否则Bootstrap表格样式不会被使用。

根据具体问题类型，进行步骤拆解／原因原理分析／内容拓展等。

具体步骤如下：／导致这种情况的原因主要是……

添加全局注册，用来滚动

window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', function() { let sign = 100 const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight if (scrollDistance <= sign) { binding.value() } }) } })

sign 用于标记位置

直接让scrollDistance === sign 并不能保证每次都会触发，所以用区间表示。后续会处理频繁触发问题。

添加

给需要加载的表格添加自定义，v-loadmore=”loadMore”。在mods中定义触发的

loadMore () { if (this.loadSign) { this.loadSign = false this.page++ if (this.page > 10) { return } setTimeout(() => { this.loadSign = true }, 1000) console.log('到底了', this.page) } }

this.loadSign 用于标记page是否继续递增

以上这篇vue element-ui table表格滚动加载方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:Vue2.0+ElementUI实现表格翻页的实例详解vue2.0的Element UI的表格table列时间戳格式化Element-ui table中过滤条件变更表格内容的方法

el-table的宽度无法自适应

最近的一个后台项目大量用到了element-ui里面的table。在调试ie兼容性的时候发现，没有设定width的列会无限的变长。加上fit=false的属性之后，列会撑不开整个表格。如下图

尝试和查询了很多方法，发现遇到这个问题的人不少，但是解决方法都不同，且没有说明具体原因。

在我尝试修改的时候发现，dialog里面用到的el-table的列不会出现拉长的情况，所以在el-table的最外层加了一个div，并且设定了width:，结果还是不行，我强行给他设定为一个具体的值1200,问题解决了，用了calc的属性，给他设定了一个值，问题解决了，但是不知道原因，写下来，看在以后的时间里能否找到真正的原因所在。

设置HTML页面自适应宽度的table的方法：

1、定义html页面table代码：

2、控制表格自适应的样式css代码：

.content {

width: 1100px;

height: 200px;

background: #fdfdfd;

margin: 0px auto;

ition: relative;

top: 40px;

border: 1px solid #;

}.content .content-header {

width: ;

height: 40px;

background-color:#;

background-image:-moz-linear-gradient(top,#eeeeee,#cccccc);

background-image:-webkit-gradient(linear,0 0,0 ,from(#eeeeee),to(#cccccc));

background-image:-webkit-linear-gradient(top,#eeeeee,#cccccc);

background-image:-o-linear-gradient(top,#eeeeee,#cccccc);

background-image:linear-gradient(to bottom,#eeeeee,#cccccc);

border-bottom: 1px solid #;

}.content-loader {

overflow: scroll;

}.content-loader table {

width: auto;

background: #;

}.content-loader table tr {

background: #eee;

}.content-loader tr td {

white-space: nowrap;

}3、完整代码如下：

4、运行效果如下：

表格的宽度随着内容的变化而变化。