show-overflow-tooltip提示内容长度太长了，帮修改为提示内容多行显示的

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="routingName" label="工艺路线" align="center">
      <template #default="{ row }">
        <el-tooltip
          placement="top"
          effect="light"
          :open-delay="300"
          :popper-options="popperOptions"
        >
          <template #content>
            <div style="max-width: 300px; white-space: normal; word-break: break-all;">
              {{ row.routingName }}
            </div>
          </template>
          <span style="display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
            {{ row.routingName }}
          </span>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column prop="order" label="顺序" align="center" />
  </el-table>
</template>

<script setup>
import { ref } from 'vue';

// 示例数据（根据你的截图）
const tableData = ref([
  { routingName: '123', order: '123' },
  { routingName: '!@#$%...8*()_!@#$', order: '!@#$%...8*()_!@#$' },
  { routingName: '!@#$%...8*()_!@#$', order: '!@#$%...8*()_!@#$' },
  { routingName: '一二四码大八九十+一二四码大八九十+一二四码大八九十+', order: '一二四码大八九十+一二四码大八九十+' },
  { routingName: '工艺路线3', order: '' },
  { routingName: '工艺路线1', order: '333' },
  { routingName: '工艺路线2生产报废报废报废报废报废报废报废报废报废报废报废报废报废报废报废报废报废报废报废报废', order: '' },
]);

// 自定义 popper 选项，强制调整定位
const popperOptions = {
  modifiers: [
    {
      name: 'computeStyles',
      options: {
        gpuAcceleration: false, // 禁用 GPU 加速，防止定位偏移
      },
    },
    {
      name: 'preventOverflow',
      options: {
        boundariesElement: 'viewport', // 确保 tooltip 不超出视口
      },
    },
  ],
};
</script>

<style scoped>
/* 确保单元格内容不影响 tooltip 定位 */
:deep(.el-table__cell) {
  position: relative;
  overflow: visible !important;
}

/* 调整 tooltip 的样式 */
:deep(.el-tooltip__popper) {
  max-width: 300px;
  white-space: normal;
  word-break: break-all;
}
</style>