element-ui中 table表格表头宽度自适应

最新推荐文章于 2024-04-23 20:57:10 发布

墨柒柒

最新推荐文章于 2024-04-23 20:57:10 发布

阅读量2.4k

点赞数 1

文章标签：前端 vue elementui javascript vue.js

本文链接：https://blog.csdn.net/m0_53101857/article/details/124411299

版权

在移动端中，其实也是可以使用element-ui的table表格的哦~

只不过需要做一些适配，比如表头的宽度如何进行自适应

本段代码放在js文件中即可

const UI_SIZE = 375 // 设计图宽度
export function converSize(baseNum = 12) {
  return (document.body.offsetWidth / UI_SIZE) * baseNum
}

用法：

在vue文件中引入上面的那段js文件后，直接使用即可

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="converSize(100)">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="converSize(180)">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="converSize(200)">
      </el-table-column>
    </el-table>

这样就可以实现表头的宽度自适应啦

要是大家有更好的方法,欢迎留言评论哦~互相学习