el-table根据内容调整列宽

<el-table-column label="所属区域" align="center" prop="areaList"  
        :width="calculateWidth('areaList')">
        <template slot-scope="scope">
          <span v-if="scope.row.areaList">
            <span v-for="(item, index) in scope.row.areaList">
              {{ item.areaName }}
              <span v-if="index !== scope.row.areaList.length - 1">|</span>
            </span>
          </span>
        </template>
      </el-table-column>

methods里边填入方法
calculateWidth(column) {
    let baseWidth = 300; // 默认最小宽度
    this.allocationList.forEach(row => {
      console.log(row[column])
      const contentLength = row[column]?.length || 0;
      baseWidth = Math.max(baseWidth, contentLength * 25); // 每字符25px
    });
    return `${baseWidth}`;
  },