网站开发流程怎么写,wordpress赞的功能,百度站长平台账号,福建嘉瑞建设工程有限公司网站由于table组件本身并不支持宽度自适应#xff0c;但实际项目需要#xff0c;而且多处有用到table组件#xff0c;所以尝试着自己来二次封装一下组件 想法
刚开始的想法很简单#xff0c;就是获取每一列中数据和标题在表格中的长度#xff0c;然后将当中最大的长度作为该列… 由于table组件本身并不支持宽度自适应但实际项目需要而且多处有用到table组件所以尝试着自己来二次封装一下组件 想法
刚开始的想法很简单就是获取每一列中数据和标题在表格中的长度然后将当中最大的长度作为该列的宽度就可以了。
但是我们怎么才能知道它们在表格中的长度呢
打开F12查看表格中的数据我们可以发现数据的外面包了一层span标签而且父元素设置了padding 那我就在想能不能自己手动创建一个span标签包裹数据然后通过offerWidth获取宽度呢
实践
说干就干
// calculateColumnWidth.js文件
const getTextWidth str {const span document.createElement(span)span.style.display inline-blockspan.style.visibility hiddenspan.style.fontSize 14pxspan.innerText strdocument.body.appendChild(span)const width span.offsetWidthdocument.body.removeChild(span)return width 36 15
}export const calculateColumnWidth (columns, data) {columns.forEach(c {if (c.type selection) returnconst arr data.map(d d[c.key])arr.push(c.title)// 比较某一列的所有值包含标题名c.width Math.max(...arr.map(d getTextWidth(d)))})
}这里的getTextWidth函数是用来计算每个数据应有的宽度加36是因为标签的父元素默认设置了左右padding为18px而这里加15是想数据不要占满整个表格左右留有一定的空间。值得注意的是如果没有修改table中的默认字体大小则字体大小要保持一致
而calculateColumnWidth函数是用来计算并设置每列的最大宽度的 尝试引入函数并使用watch来深度监听传入的data数据如果数据有变就会调用calculateColumnWidth函数从而更新columns这个数组对象中的宽度。由于这个table组件如果不传data也会展示表格如下图所以immediate需要设置为true让calculateColumnWidth函数在页面一加载就执行一次 最终实现宽度自适应的效果如下图
无数据时 有数据时 总结
二次封装table组件的源代码
!-- 二次封装table组件 --template!-- 表格 --Table v-bindattrs refchildReftemplate v-fork in Object.keys(slots) #[k] :keykslot :namek/slot/template/Table
/templatescript setup
import { calculateColumnWidth } from utils/calculateColumnWidth
import { defineProps, ref, useAttrs, useSlots, watch } from vueconst attrs useAttrs()
const slots useSlots()
const childRef ref()
const { widthAuto } defineProps({widthAuto: {type: Boolean,require: false,},
})console.log(attrs, attrs)
console.log(slots, slots)// 计算宽度实现自适应表格内容宽度
widthAuto watch(() attrs.data,() {calculateColumnWidth(attrs.columns, attrs.data)},{ deep: true, immediate: true })const clearSelect () childRef.value.selectAll(false)//暴露方法
// eslint-disable-next-line no-undef
defineExpose({clearSelect,
})
/script父组件中使用使用widthAuto来控制是否要宽度自适应
