vue怎么把columns中的富文本数据渲染出来

在 Vue 中渲染富文本数据可以使用 `v-html` 指令。您可以通过 `v-html` 将包含富文本数据的字符串直接渲染到页面上。

以下是一个示例代码：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.prop">{{ column.label }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <td v-for="column in columns" :key="column.prop" v-html="item[column.prop]"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  }
}
</script>

在上面的代码中，我们使用了 `v-for` 循环渲染表格的列和行。在列的 `th` 标签中，我们使用了 `column.label` 渲染列名。在行的 `td` 标签中，我们使用了 `item[column.prop]` 渲染单元格内容。这里的 `column.prop` 就是数据源中对应列的属性名。

对于包含富文本数据的列，我们使用了 `v-html` 指令，将富文本数据直接渲染到页面上。

需要注意的是，使用 `v-html` 指令需要谨慎，因为它可以直接渲染 HTML 代码，存在一定的安全风险。如果您的数据源中包含用户输入的数据，一定要进行安全性检查和过滤，避免 XSS 攻击等安全问题。