Vue.js Vue element-ui 格式化器 – 如何显示HTML

在本文中，我们将介绍如何使用Vue.js和element-ui中的组件的格式化器来显示HTML内容。

Vue.js是一个用于构建用户界面的JavaScript框架，它的核心是一个响应式的数据绑定系统，可以方便地管理和更新界面上的数据。element-ui是一个基于Vue.js的UI组件库，提供了丰富的组件和工具来构建漂亮的用户界面。

在Vue.js中，是element-ui中的一个表格列组件，它可以用于定义表格中每一列的样式和内容。其中的formatter属性是一个用于格式化单元格内容的函数。

如何使用formatter显示HTML？

使用formatter属性可以定义一个函数来格式化表格列的内容。在这个函数中，我们可以通过返回一个HTML字符串来展示HTML内容。

下面是一个示例，演示如何在的formatter中显示HTML。

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名">
    </el-table-column>
    <el-table-column prop="content" label="内容" :formatter="formatContent">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', content: '<span style="color: red;">Hello, World!</span>' },
        { name: '李四', content: '<a href="https://www.example.com">Click me!</a>' },
      ]
    };
  },
  methods: {
    formatContent(row, column, cellValue, index) {
      return row.content;
    }
  }
};
</script>

以上示例代码中，我们创建了一个包含姓名和内容两列的表格。在内容列中，我们将formatter属性绑定到了formatContent方法。在这个方法中，我们简单地返回了row.content，即表格数据中的内容项。由于row.content是一个包含HTML标签的字符串，Vue.js会将其作为HTML解析并正确渲染到表格中。

通过这种方式，我们可以很方便地在的formatter中显示HTML内容。