el-table-column循环创建表格时设置列宽

最新推荐文章于 2024-03-12 15:27:58 发布

敲什么代码

最新推荐文章于 2024-03-12 15:27:58 发布

阅读量2.8k

点赞数 2

文章标签：前端 elementui

本文链接：https://blog.csdn.net/yigeboke/article/details/125674494

版权

当我们foir循环创建表格后每列的宽是相同的,但是有些列文本少且固定长度,这时我们可以这样写来手动给它设置一个固定宽度

//html部分
<el-table-column v-for="(item,index) in theadData" :prop="item.Field" :label="item.Value"       :key="index" :width="tableWidth(item.label)">
</el-table-column>

//js部分
tableWidth(l) {
    let width = ''
    switch (l) {
    case '块长姓名':
      width = '100'
      break
    case '所属居委':
    width = '150'
    break
    case '姓名':
      width = '100'
      break
    case '身份证':
      width = '180'
      break
    default:
      width = ''
    }
    return width
}