elementUI ElTable自适应宽度

最新推荐文章于 2023-12-07 16:19:35 发布

本来就是酸奶

最新推荐文章于 2023-12-07 16:19:35 发布

阅读量437

点赞数

文章标签： elementui javascript 前端

本文链接：https://blog.csdn.net/qq_42828972/article/details/126883984

版权

自适应宽度

记录

function getTextWidth(str: string) {
  let width = 0
  let html = document.createElement('span')
  html.innerText = str
  html.className = 'getTextWidth'
  document.querySelector('body')?.appendChild(html)
  width = document.querySelector('.getTextWidth')?.offsetWidth
  document.querySelector('.getTextWidth')?.remove()
  return width + 50
}

    <el-table :data="NewData.list" style="width: 1500px" height="700" show-overflow-tooltip fit>
      <el-table-column :prop="t.value" :fixed="i == 0" :sortable="i != 0" v-for="(t, i) in NewData.Title" :width="getTextWidth(t.Title || '')">
        <template #header>
          {{ t.Title }}
        </template>
      </el-table-column>
    </el-table>