el-table 表格列宽自适应

思路：获取当前列的最长数据和表头名称比较，取大值赋值给宽度。

效果图

• 自适应前
  
• 自适应后
  

自适应方法

// col 里面包含了表头字段和名称，list 是表格数据
columnWidth(col, list) {
    let prop = col.prop, lab = col.lab;
    let width = 90; // 设定一个最小值
    let maxlenStr = ""; // 最长字符串
    for (let info of list) {
        if (maxlenStr.length < (info[prop] + "").length) maxlenStr = info[prop];
    }
    width = Math.max(width, len(lab), len(maxlenStr));
    // 表格自带的内边距(20px) 自调
    return width + 12; // 这里我加了 12px

    function len(str) {
	    // 实际分配长度可根据需要自行调整
	    let length = 0;
	    for (const char of str + "") {
	      	// 英文小写字符 8px
	      	if ("a" <= char && char <= "z") length += 8;
 	     	// 英文大写字符 12px
  	    	else if ("A" <= char && char <= "Z") length += 12;
  	    	// 中文字符 16px
  	    	else if (char >= "\u4e00" && char <= "\u9fa5") length += 16;
  		   	// 其他 8px
    	  	else length += 8;
 	   }
 	   return length;
	}
},

源码

<template>
  <div class="table">
    <el-table :data="tableData" border>
      <el-table-column
        v-for="(col, inx) in columns"
        :key="inx"
        :label="col.lab"
        :prop="col.prop"
        :width="columnWidth(col, tableData)"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      columns: [
        { lab: "时间", prop: "date" },
        { lab: "姓名", prop: "name" },
        { lab: "地点", prop: "addr" },
        { lab: "地点", prop: "addr" },
        { lab: "韵", prop: "yu" },
      ],
      tableData: [
        {
          date: "2018-05",
          name: "李",
          addr: "上海市普陀区金沙江路 1518 弄",
          yu: "没去过",
        },
        {
          date: "2018-05-20",
          name: "四六",
          addr: "百草园到三味书屋",
          yu: "目接不暇",
        },
        {
          date: "2018-05-20 05:20",
          name: "龙傲天",
          addr: "黄四娘家坐飞机",
          yu: "一飞冲天",
        },
        {
          date: "2018-05-20 13:14:01",
          name: "慕容堡垒",
          addr: "绣楼有少女",
          yu: "隔墙有耳",
        },
      ],
    };
  },
  methods: {
    // col 里面包含了表头字段和名称，list 是表格数据
    columnWidth(col, list) {
      let prop = col.prop,
        lab = col.lab;
      let width = 90; // 设定一个最小值
      let maxlenStr = ""; // 最长字符串
      for (let info of list) {
        if (maxlenStr.length < (info[prop] + "").length) maxlenStr = info[prop];
      }
      width = Math.max(width, len(lab), len(maxlenStr));
      // 表格自带的内边距(20px) 自调
      return width + 12; // 这里我加了 12px

      function len(str) {
        // 实际分配长度可根据需要自行调整
        let length = 0;
        for (const char of str + "") {
          // 英文小写字符 8px
          if ("a" <= char && char <= "z") length += 8;
          // 英文大写字符 12px
          else if ("A" <= char && char <= "Z") length += 12;
          // 中文字符 16px
          else if (char >= "\u4e00" && char <= "\u9fa5") length += 16;
          // 其他 8px
          else length += 8;
        }
        return length;
      }
    },
  },
};
</script>