el-table中必备的数据格式化方法，js，数据格式化

最新推荐文章于 2024-08-09 11:14:56 发布

温文如玉的竹子

最新推荐文章于 2024-08-09 11:14:56 发布

阅读量1.1k

点赞数

分类专栏：前端 Vue 文章标签： vue.js 前端 html vue

本文链接：https://blog.csdn.net/m0_50875661/article/details/124246928

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

主要功能：

1.Vue中，使用 le-table 时对 template 内的字符串进行自定义格式化

2.js将html中的特殊字符还原

后端传来的字符串：

notes: "<p><59dB(A) at 13.5V,  <55dB(A) at 6.5V. </p><p>DS-RTA OTF can meet seat sound requirement.</p>"

格式化后显示在页面上的：

<59dB(A) at 13.5V, <55dB(A) at 6.5V. DS-RTA OTF can meet seat sound requirement.

话不多说，上代码：

   <el-table-column prop="notes" label="Notes">
     <template slot-scope="scope">
       <span>{{ problemSourceFormat(scope.row.notes)}}</span>
     </template>
   </el-table-column>



    methods: {
      problemSourceFormat(data) {
        if (data) {
          console.log("我在这里：：：：：：：：：："+ data)
          return this.htmlUnEscape(data);
        }
      },
      htmlUnEscape(str) {
        return str.replace(/&lt;|&gt;|&quot;|&amp;/g, (match) => {
          switch (match) {
            case '&lt;':
              return '<';
            case '&gt;':
              return '>';
            case '&quot;':
              return '"';
            case '&amp;':
              return '&';
          }
        });
      },
}