el-tabel处理后端返回来的数据带＜br＞

是阿狸

已于 2024-04-08 08:56:53 修改

阅读量395

点赞数 5

文章标签： vue.js elementui javascript

于 2024-04-07 10:20:22 首次发布

本文链接：https://blog.csdn.net/m0_64707449/article/details/137454488

版权

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="description" label="Description" :formatter="formatDescription"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'Item 1',
          description: 'Description with<br>line break'
        },
        // ... 其他数据
      ]
    };
  },
  methods: {
    formatDescription(row, column, cellValue) {
      return cellValue.replace(/<br>/g, '\n');
    }
  }
};
</script>

第二种方法：v-html

              <el-table-column
                      prop="distributionGroup"
                      label="分组"
                      width="180">
                       <template slot-scope="scope">
                        <div v-html="scope.row.distributionGroup">
                          {{ scope.row.distributionGroup }}
                        </div>
                      </template>
                    </el-table-column>