Vue实现字符串换行

先上效果图：

数据格式：字符串

代码如下：

<template>
      <div style="margin-top:20px">
        <el-table :data="tableData" style="width: 100%" border >
          <el-table-column
            prop="parameter"
            label="参数"
          ></el-table-column>
          <el-table-column
            prop="type"
            label="类型"
          ></el-table-column>
          <el-table-column
            prop="describe"
            label="描述"
          ></el-table-column>
        </el-table>
      </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          parameter: "parameter1",
          type: "String",
          describe: "类名",
        },
        {
          parameter: "parameter2",
          type: "Number",
          describe: "1：中国地图彩色版 \n2：中国地图暖色版\n3：中国地中国地图蓝黑版\n4：中国地图灰色版",
        },
      ],
    };
  },
  },
};
</script>
<style >
.cell{
  white-space: pre-wrap !important;
}
</style>

在网上查了很多种方法，但都没有效果。
图中加入\n是起换行的作用，但是光写这个是不够的。
还需要在样式里加上style="white-space: pre-wrap;"
一般写到这里，已经可以实现效果了。

因为我用的Element UI框架，所以是打开F12查看表格内文字的父级元素，给这个父级元素加上
white-space: pre-wrap

提示：
如果你的CSS里有