这两个标签使用起来非常简单,就是用来控制table的列的样式,col即column(列)的开头三个字母,group有集体的意思,于是我们可以很自然的猜想col需要放在colgroup的里面。我们首先看个案例: <table> <colgroup style="width: 100px;background-color: red;"></colgroup> <colgroup style="width: 200px;background-colo...
通过查看渲染后的 DOM 元素发现,el-table的表头和内容分别用了一个原生table,通过colgroup设置每列的宽度。就从这里入手,col的name属性值和对应的td的class值是一致的,这样就可以遍历对应列的所有单元格,找出宽度最大的单元格,用它的内容宽度加上一个边距作为该列的宽度。 具体实现 怎么计算内容宽度呢?这是个比较...
打开调试之后,发现table的宽度并没有按照100%来显示,而是根据表格宽度值来计算的(我这里是640px),并且在table标签底下发现了colgroup和col标签,colgroup包裹着对应单元格数的col,并且col的宽度为80px,瞬间恍然大悟,明白640px是怎么得来的,这里一共有8个单元格,8*80就是640px了,那要怎么解决这个默认样式呢? 一、给...
var el = e.target; // 获取到当前 table 的 colgroup col 节点,用于后面获取宽度 // getParentNodes 是一个模仿 $(el).parents() 的方法 var colList = getParentNodes(el, 'table').querySelectorAll('colgroup col'); // 获取当前拖动的是第几个,方便后续检测 DOM 是否已更新 var currentColIndex ...
// 在项目中新建一个公共css文件,这样可以适用于所有表格table//common.csstable,tbody,thead{width:100%!important;}colgroup{position:absolute;width:100%!important;display:flex;}col{flex:1;text-align:center;}//在main.js中引入即可,table里面的单元格不用设置宽度属性,这里就可实现自适应。
问题:table打印的时候错位的问题,像下图这样 导致他的原因:把要打印的节点复制出来长这样,他里面有两个table,分别有自己的colgroup,看起来一样,但是因为打印可能会缩放table,宽度的缩放两个table就有点差异,导致的错位 整体的打印实现步骤如下,直接看解决方法的,
修改样式代码: /deep/ .el-table th.gutter { width: 5px;//表头右侧空白块宽度,与修改的滚动条样式宽度保持一致,否则会造成表头与内容border错乱}/deep/ .el-table colgroup col[name='gutter'] { width: 5px;//gutter列设置宽度,与上保持一致}/deep/ .el-table__body { ...
<style> .el-table th.gutter{ display: none; width:0 } .el-table colgroup col[name='gutter']{ display: none; width: 0; } .el-table__body{ width: 100% !important; } .el-table__body-wrapper { &::-webkit-scrollbar { // 整个滚动条 width: 0; // 纵向滚动条的宽度 background: ...
看代码发现使用colgroup属性控制他们有相同宽度的列。name可以不写,按顺序对应th,td。并且table的样式改为table-layout: fixed;border-collapse: separate。 开发中会发现td,th的属性并不好控制,我们在里面多套一层div控制样式。 image.png 分开写必然有好多好处,在自己封装表格的时候发现表格的需求功能还是比较多的,...
this.columns, column => <col name={ column.id } width={ column.realWidth || column.width } />) } </colgroup> <tbody> { this._l(this.data, (row, $index) => [<tr style={ this.rowStyle ? this.getRowStyle(row, $index) : ...