二次封装View Design的table组件,实现宽度自适应,内容在一行展示

由于table组件本身并不支持宽度自适应,但实际项目需要,而且多处有用到table组件,所以尝试着自己来二次封装一下组件

想法

刚开始的想法很简单,就是获取每一列中数据和标题在表格中的长度,然后将当中最大的长度作为该列的宽度就可以了。

但是我们怎么才能知道它们在表格中的长度呢?

打开F12查看表格中的数据,我们可以发现,数据的外面包了一层span标签,而且父元素设置了padding

那我就在想,能不能自己手动创建一个span标签包裹数据,然后通过offerWidth获取宽度呢?

实践

说干就干!

jsx 复制代码
// calculateColumnWidth.js文件
const getTextWidth = str => {
  const span = document.createElement('span')
  span.style.display = 'inline-block'
  span.style.visibility = 'hidden'
  span.style.fontSize = '14px'
  span.innerText = str
  document.body.appendChild(span)
  const width = span.offsetWidth
  document.body.removeChild(span)
  return width + 36 + 15
}

export const calculateColumnWidth = (columns, data) => {
  columns.forEach(c => {
    if (c.type === 'selection') return
    const 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-bind="attrs" ref="childRef">
    <template v-for="k in Object.keys(slots)" #[k] :key="k">
      <slot :name="k"></slot>
    </template>
  </Table>
</template>

<script setup>
import { calculateColumnWidth } from 'utils/calculateColumnWidth'
import { defineProps, ref, useAttrs, useSlots, watch } from 'vue'

const 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来控制是否要宽度自适应):

相关推荐
01传说21 分钟前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
小李飞飞砖28 分钟前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖29 分钟前
React Native 状态管理方案全面对比
javascript·react native·react.js
烛阴2 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化2 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月2 小时前
7月10号总结 (1)
前端·css·css3
天天扭码2 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder2 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程