el-table-column显示富文本

在Element UI的表格组件（el-table）中，要显示解析富文本内容，你可以使用`v-html`指令来渲染HTML内容。这个例子展示了如何在一个列（prop="goods_desc"）中展示商品详情的详细信息，这些内容通常包含HTML元素[^1]：

<el-table-column prop="goods_desc" label="商品详情" width="300">
    <template slot-scope="scope">
        <div v-html="scope.row.goods_desc" style="height:200px"></div>
    </template>
</el-table-column>

这段代码中，`scope.row.goods_desc`是数据绑定的值，它会动态渲染为表格单元格的内容。注意为了安全起见，`v-html`应该只用于可信的数据源，因为不安全的HTML可能会导致XSS攻击。

另外，如果你想实现一个点击事件，比如在表单中添加新的列，可以通过`@click`监听器配合`addColumn`方法来改变状态。例如，点击时可以切换当前单元格的内容从静态到可编辑的状态[^2]：

methods: {
    addColumn(index, row) {
        // 在这里实现点击后切换输入框逻辑，可能是隐藏div并显示input，或者直接赋值给一个新的变量
        // 当用户完成输入后，再更新row.goods_desc或创建新的列项
        this.editingRow = index;
        this.editedDesc = row.goods_desc;
        // 假设有个toggleEditable方法
        this.toggleEditable(index);
    },
    toggleEditable(index) {
        // 显示/隐藏相应的输入框或其他交互逻辑
        if (this.isEditing(index)) {
            // 隐藏输入框
            this.tableData[index].goods_desc = '';
            // 或者清空输入框内容
            this.editedDesc = '';
        } else {
            // 显示输入框
            this.tableData[index].goods_desc = this.editedDesc;
        }
    }
}

这里的`addColumn`函数会在点击时触发，`toggleEditable`则负责实际的编辑操作。记得在模板里添加相应的输入元素供用户编辑。