什么网站免费做简历,网站友情链接连接,做网站需要用c语言吗,pc网站自动跳转wap在使用element-ui中#xff0c;会发现表格组件el-table在未指定宽度情况下#xff0c;会自动计算并给表格宽度赋值。但实际开发中#xff0c;有时需要根据内容实际长度自动撑开显示#xff0c;由内容的多少而决定表格的宽度#xff0c;而不是默认宽度为100%。在默认情况下… 在使用element-ui中会发现表格组件el-table在未指定宽度情况下会自动计算并给表格宽度赋值。但实际开发中有时需要根据内容实际长度自动撑开显示由内容的多少而决定表格的宽度而不是默认宽度为100%。在默认情况下表格宽度为100%显示并且列项未指定宽度情况下剩余部分会平均分配宽度如下图 图1-默认情况宽度为100% 本案例实际需求如下图所示由内容自动撑开显示。 图2-根据内容自动撑开
一、演示页面 首先创建Vue2项目并新建演示页面页面代码如下
templatedivel-table sizemini border :datatableDatael-table-column typeindex label序号 width50px/el-table-columnel-table-column label名称 propname/el-table-columnel-table-column label内容 propcontent/el-table-columnel-table-column label图片 propthumbtemplate slot-scopescopediv classthumbimg v-ifscope.row.thumb :srcscope.row.thumb classimg //div/template/el-table-columnel-table-column label创建时间 propcreatetime/el-table-columnel-table-column label更新时间 propupdatetime/el-table-column/el-table/div
/templatescript
import AutoTable from ./autoTable
export default {data(){return {tableData: [{name: Angular, content: This is Angular Javascript, thumb: require(/assets/angular.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: VueJs, content: This is Vue Javascript, thumb: require(/assets/logo.png), createtime: 2024/6/15, updatetime: 2024/6/15},{name: NuxtJs, content: This is Nuxt Javascript, thumb: require(/assets/nuxtjs.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: React, content: This is React Javascript, thumb: require(/assets/react.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: Dog, content: This is Dog Javascript, thumb: require(/assets/dog.jpg), createtime: 2024/6/15, updatetime: 2024/6/15}]}}
}
/scriptstyle langless scoped
.thumb{position: relative;img{ display: block; }.img{width: 30px;}.hover{display: none;width: 200px;position: absolute;left: 35px;top: 0;z-index: 1000;}:hover{.hover{ display: block; }}
}
/style以上代码创建好后显示为“图1”中的效果。
二、样式调整 如下图所示element-ui中默认表格样式.cell为块级元素为了能获取到内容真实的宽度这里需要将其修改为行内块这样就能获取到内容的宽度了。 这里使用的是less预编译器样式代码如下
style langless scoped
// 略.../deep/ .el-table .cell{ display: inline-block; }
/deep/ .el-table th.el-table__cell.cell{ display: inline-block; width: auto; }
/style 如上图样式内容添加后选择元素则是按内容实际宽度区域进行显示。
三、directives中定义钩子函数 Vue.directive构子函数对于组件中元素的改造是非常方便的此时需要添加一个可以自动处理表格宽度的自定义指令用于统一处理项目中需要根据内容自动撑开的表格。 对于Vue.directive介绍之前一篇已介绍过不清楚朋友可以前去了解一下地址Element-UI - 解决el-table中图片悬浮被遮挡问题_vuetable的图片放大后总是浮于文字下方-CSDN博客 由于本人项目将表格组件进行了封装所以这里使用局部自定义指令方法如需全局处理可以将其功能移至全局文件中定义。 代码如下
export default {data(){return {tableData: [{name: Angular, content: This is Angular Javascript, thumb: require(/assets/angular.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: VueJs, content: This is Vue Javascript, thumb: require(/assets/logo.png), createtime: 2024/6/15, updatetime: 2024/6/15},{name: NuxtJs, content: This is Nuxt Javascript, thumb: require(/assets/nuxtjs.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: React, content: This is React Javascript, thumb: require(/assets/react.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: Dog, content: This is Dog Javascript, thumb: require(/assets/dog.jpg), createtime: 2024/6/15, updatetime: 2024/6/15}]}},directives: {// 自定义v-autotableautotable: {inserted: (el, binding) {}}},
} 注意自定义指令中inserted钩子函数是在被绑定元素插入父节点时调用只执行一次。
四、定义AutoTable类 定义AutoTable类用于获取每列内容的实际宽度并通过获取每列中最大的内容宽度计算出表格的宽。 代码如下
/*** 定义类 - 自定义表格宽度*/
class AutoTable{constructor(){this.timerHandle null; //计时器手柄}// 开始重新计算表格宽度start(el, binding){}
}
export default AutoTable; 本类计时器是用于延迟获取内容部分DOM当内容读取到后通过或满足某些条件后通过this.timerHandle进行清除计时器。
五、修改表格宽度 如下图可见element-ui中的表格组件是分头部标题部分和内容部分。所以要分两部分获取先获取头部对应列内容的宽度再获取内容部分的列中所有内容的宽度合并到一个数组中筛选出每列中的最大宽度作为列宽。 下面实现原理和逻辑就不作细说了每行代码都已添加备注并说明作用大家可以慢慢细品。代码如下
/*** 定义类 - 修正表格宽度*/
class AutoTable{constructor(){this.timerHandle null; //计时器手柄}// 开始重新计算表格宽度start(el, binding){// 如果值为false 则不进行计算处理if(!binding.value) return;const headerDOM el.querySelector(.el-table__header-wrapper), // 头部DOMbodyDOM el.querySelector(.el-table__body-wrapper); // 内容DOM// 先清除旧计时器clearInterval(this.timerHandle);// 开始计时this.timerHandle setInterval(() {const tds bodyDOM.querySelectorAll(table tbody tr), // 获取内容行数ths headerDOM.querySelectorAll(table thead th .cell), // 获取头部列元素emptyDOM el.querySelector(.el-table__empty-text); // 获取空DOM节点// 如果满足条件结束计时器if(null ! emptyDOM || tds.length0) {clearInterval(this.timerHandle);}if(tds.length 0 ths.length 0) return;// 定义变量 存储每列的宽度数据const widths []; // 二维数组存储行和列数据// 获取标题中的单元格宽度ths.forEach((item, i) widths[i] [item.offsetWidth]);// 获取内容部分列的单元格宽度tds.forEach(trEle {const cells trEle.querySelectorAll(td .cell);cells.forEach((item, i) widths[i].push(item.offsetWidth))});// 定义存储每列中最大值宽度数组const maxWidth [];// 获取每列中宽度最大值内容widths.forEach((arr, i) maxWidth[i] arr.reduce((maxValue, item) Math.max(maxValue, item), arr[0]));// 定义变量存储表格宽度追加内填充10const realWidth maxWidth.reduce((total, value) total value, 0) (maxWidth.length * 10);// 修改表格宽度if(realWidth0) el.style.width realWidth px;}, 50);}
}export default AutoTable; 页面中在el-table标签上添加v-autotable并且引入autotable.js文件在组件注册插入时实例类对象并执行start()函数代码如下
templatedivel-table sizemini border :datatableData v-autotabletrueel-table-column typeindex label序号 width50px/el-table-columnel-table-column label名称 propname/el-table-columnel-table-column label内容 propcontent/el-table-columnel-table-column label图片 propthumbtemplate slot-scopescopediv classthumbimg v-ifscope.row.thumb :srcscope.row.thumb classimg //div/template/el-table-columnel-table-column label创建时间 propcreatetime/el-table-columnel-table-column label更新时间 propupdatetime/el-table-column/el-table/div
/templatescript
import AutoTable from ./autoTable
export default {data(){return {tableData: [{name: Angular, content: This is Angular Javascript, thumb: require(/assets/angular.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: VueJs, content: This is Vue Javascript, thumb: require(/assets/logo.png), createtime: 2024/6/15, updatetime: 2024/6/15},{name: NuxtJs, content: This is Nuxt Javascript, thumb: require(/assets/nuxtjs.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: React, content: This is React Javascript, thumb: require(/assets/react.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: Dog, content: This is Dog Javascript, thumb: require(/assets/dog.jpg), createtime: 2024/6/15, updatetime: 2024/6/15}]}},directives: {// 自定义悬浮v-autotableautotable: {inserted: (el, binding) new AutoTable().start(el, binding),}},
}
/script 此时页面效果如下图细心朋友会发现此时未指定列宽部分的列是等宽显示并出现换行的情况并未按每列最大实际宽度显示这个问题下面再细讲。 六、colgroup 在解决列宽问题前先来了解下colgroup。 colgroup 元素用于设置表的特定列的样式 colgroup 元素应该用作列规范的容器每个组都使用 col 元素指定span 属性指定获取样式的列数style 属性指定列的样式。 注意: colgroup 标记必须是一个 table 元素的子元素并且应该放在任何其他表元素之前如 head 、 tr 、 td 等但是如果存在的话应该放在 caption 元素之后。 在 colgroup 中允许使用的 CSS 属性的选择非常有限合法 CSS 属性如下
名称描述width设置宽度visibility是否可见background背景样式border边界线 所有其他 CSS 属性对表没有影响。
七、修整每列的宽度 如下图可见Element-ui组件中表格的列宽是通过colgroup col对每列宽进行控制的所以要控制每列的宽度则需要将其修正为之前获取第列内容宽最大值即可。 代码如下
class AutoTable{// 略...// 开始重新计算表格宽度start(el, binding){// 如果值为false 则不进行计算处理if(!binding.value) return;const headerDOM el.querySelector(.el-table__header-wrapper), // 头部DOMbodyDOM el.querySelector(.el-table__body-wrapper); // 内容DOM// 先清除旧计时器clearInterval(this.timerHandle);// 开始计时this.timerHandle setInterval(() {const tds bodyDOM.querySelectorAll(table tbody tr), // 获取内容行数ths headerDOM.querySelectorAll(table thead th .cell), // 获取头部列元素emptyDOM el.querySelector(.el-table__empty-text); // 获取空DOM节点// 略...// 修改表格宽度if(realWidth0) el.style.width realWidth px;// 获取colgroupconst headerColGroup headerDOM.querySelectorAll(colgroup col),bodyColGroup bodyDOM.querySelectorAll(colgroup col);// 修改每列宽度maxWidth.forEach((val, i) {headerColGroup[i].style.width val px;bodyColGroup[i].style.width val px;});}, 50);}
} 通过获取表格header中的colgroup col 和body中的colgroup col元素再通过将第列中最大内容宽度赋值到对应列的col上即可。当上述代码执行后再查看col属性则发现列的值已发生改变如下图 页面效果如下图此时第列中都以最大内容宽度显示表格宽度根据内容长度变化而改变。 八、更新宽度 由于inserted是在元素第一次插入时执行只调用一次所以当表格中数据变化就需要使用到update和componentUpdated了。这里使用componentUpdated它是在指令所在组件的 VNode 及其子 VNode 全部更新后调用。 代码如下
import AutoTable from ./autoTable
export default {data(){return {tableData: [{name: Angular, content: This is Angular Javascript, thumb: require(/assets/angular.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: VueJs, content: This is Vue Javascript, thumb: require(/assets/logo.png), createtime: 2024/6/15, updatetime: 2024/6/15},{name: NuxtJs, content: This is Nuxt Javascript, thumb: require(/assets/nuxtjs.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: React, content: This is React Javascript, thumb: require(/assets/react.jpg), createtime: 2024/6/15, updatetime: 2024/6/15},{name: Dog, content: This is Dog Javascript, thumb: require(/assets/dog.jpg), createtime: 2024/6/15, updatetime: 2024/6/15}]}},directives: {// 自定义悬浮v-autotableautotable: {inserted: (el, binding) new AutoTable().start(el, binding),componentUpdated: (el, binding) new AutoTable().start(el, binding)}},
} 虽然此方法不是真正意义上根据内容宽度自动撑开的但也达到了预期中的效果希望对大家有所帮助。
