el-table中表格宽度设置

大家好，我是小白学编程。

最近在工作中遇到一个功能，页面上有表格展示，其实是一个再很简单不过的功能实现了，但是，有时候会遇到尴尬的情况，就是列数量比较尴尬，差不多可以拉伸整屏；差不多会在右侧流出点空白；差不多刚好多出一块，要么出现横向滚动条，要么某一列比较挤。像这种问题，也是很常见的，而且，在不同分辨率或不同放大倍数的电脑上展示时会出现不同的结果。

        根据自己遇到的情况和处理的方式，总结了一下几种处理方式

element-ui 官网地址

1、官网方式

        给前面的列设置列宽，最后面一个不设置。那么表格会自动拉伸至满屏，最后一列会根据表格列数量自动调节宽度，列数多时自动变窄，列数少时自动变宽

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

 2、官网变种

        （最后一列设置 min-width）

        根据官网提供的方式可以实现列数量少的时候拉伸整屏，但是可能会很丑，如果列数量比较尴尬时，最后一列会被压缩，最小会被压缩到宽度为 80px，有可能会导致表头和内容串行。如果给最后一列设置 min-width 属性，加一个最小宽度，如果被挤压时，会维持到最小的宽度，保证表头和内容不换行，如果表格宽度超出屏幕，会出现横向滚动条

...
<el-table-column
    prop="address"
    label="地址"
    min-width="240">
</el-table-column>
...

3、函数式

        在 el-table-column 中设置 width 绑定一个函数，在函数中计算内容最大宽度和最小宽度，返回想要的目标值，这样可以保证表格中的内容完全展示全。比较使用于较为重要的信息，并且文字内容不会过长的情况，如果文字内容过长，可能会比较丑。

<!--在表格列中这样定义-->
<el-table-column
  prop="rwdtypeName"
  label="业务"
  :width="flexColumnWidth('rwdtypeName')">
</el-table-column>


<!--在 methods 中定义宽度函数-->

flexColumnWidth(column){
  if(!column){
    return;
  }
  let maxlength = 80;//在此处设置默认宽度
  if(column == 'column1'){
        //在此处为了保证表头不换行，可以根据表头名称长度设置默认宽度
        // column1 就是对应表格中的prop属性值，比如上面的 rwdtypeName
        maxlength = 120;
  }
  for(let i = 0;i < this.dataList.length;i++){
    if(this.dataList[i][column]){
      let now_temp = this.dataList[i][column] + '';
      let flexWidth = 0;
      for(const char of now_temp){
        if(char >= 'A' && char <= 'Z' || char >= 'a' && char <= 'z'){
          //英文字母 8 像素
          flexWidth += 8;
        } else if (char >= '\u4e00' && char <= '\u9fa5') {
          //中文文字 15 像素
          flexWidth += 15;
        } else {
          //其他字符 10 像素
          flexWidth += 10;
        }
      }
      if(flexWidth > maxlength){
        maxlength = flexWidth;
      }
    }
  }
  //el-table中 cell 有左右的 padding 个 10 像素
  return maxlength+20 + 'px';
}

4、函数式变体

        对于表格列数量比较尴尬时，如果表格内容长度不是很长，并且比较均匀时，可以把每一列都通过函数式处理，并且把 width 换成 min-width。效果非常丝滑，满足浏览器拖拉，分辨不同，放大倍数不同的多种情况

5、插件式

        （在网上看到的，感觉有问题，可能是我没用明白）

        宽度自使用可以通过 v-fit-columns 插件来实现，但是有问题，变更浏览器宽度时会变形

5.1、安装插件

npm install v-fit-columns --save

5.2、在工程中引入

        在工程的入口 JS 文件中 index.js 或 main.js 中把插件引入工程，设置VUE使用该插件

import Vue from "vue";
import Plugin from "v-fit-columns";
Vue.use(Plugin);

5.3、使用

        在 el-table 标签上添加 v-fit-columns 标注即可

<el-table v-fit-columns>
 <el-table-column label="No" type="index" class-name="leave-alone"></el-table-column>
 <el-table-column label="Name" prop="name"></el-table-column>
 <el-table-column label="Age" prop="age"></el-table-column>
</el-table>

5.4、问题

在使用这个插件之后，标题可能会出现和内容列不对齐的情况，在标题后面会多出一块空白宽度，此时需要手动处理 css 样式

<style  lang="stylus" scoped>
    ::v-deep .el-table col[name=gutter]{
      display: table-cell !important;
    }
</style>

6、宽度属性方式

        通过给el-table-column 设置 width="auto" 和 min-width="百分比"  的方式可以事项表格和列宽度跟随浏览器宽度变化而变化，此处需要注意的是所有列 min-width 总和要等于 100% 。文字类型的列宽最后配合着show-overflow-tooltip 使用，如果内容过长，结尾展示...鼠标悬停时会出现tooltip

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="auto"
        min-width="20%">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="auto"
        min-width="20%">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="auto"
        min-width="60%">
      </el-table-column>
    </el-table>
  </template>

        个人认为，对于列不是很多的表格时，这种方式可以拉伸整屏，很丝滑。但是，也要根据不同的情况去做不同的处理，也有可能会都中方式同时使用。