element-ui 如何在 table 中控制数据换行

Question

1. 项目需要在 table 中，对新追加数据进行换行处理
2. 部分相关代码

<el-table style="width: 100%" :data="tableData">
  <el-table-column prop="dishName" label="菜品名称" width="200px"></el-table-column>
  <el-table-column prop="amount" label="数量" width="50px"></el-table-column>
  <el-table-column prop="money" label="金额" width=50px></el-table-column>
</el-table>
                
<script>
export default {
  data() {
    return {
      tableData: [{
        dishName: "ewqewqe",
        amount: 1,
        money: 30
      }, {
        dishName: '红烧鱼块',
        amount: 2,
        money: 60
      }]
    };
  }
};
</script>

1. 期望效果

1. 尝试在 dishName 字符串中添加 rn ，均未达到效果

Answer 1

<el-table-column prop="dishName" label="菜品名称" width="100">

<template slot-scope="scope">
    <p>{{scope.row.dishName}}</p>
    <p v-if="scope.row.notSpice!=''" style="color:red;">{{scope.row.notSpice}}</p>      
</template>

</el-table-column>
<script>
export default {
data() {

return {
  tableData: [{
    dishName: "ewqewqe",
    amount: 1,
    money: 30,
    notSpice: '不放葱'
  }, {
    dishName: '红烧鱼块',
    amount: 2,
    money: 60,
    notSpice: ''
  }]
};

}
};
</script>

Answer 2

<el-table-column prop="dishName" label="菜品名称" width="200px">

<template slot-scope="scope">
    {{scope.row.dishName}}
    <div v-if="scope.row.rn">
        {{scope.row.rn}}
    </div>
</template>

</el-table-column>

Answer 3

使用 <template slot-scope="scope"></template>

Answer 4

https://element.eleme.io/#/zh...