ojk_dtb_manage_ui/src/components/pluginManage/PluginDetail.vue

<template>
    <div id="PluginDetail">
        <h2>{{ data.pluginName }}</h2>
        <el-divider />
        <div class="itemList">
            <el-table :data="tableData" style="width: 100%" :show-header="false">
                <el-table-column prop="title" label="标题" width="160" className="vertical-align-top">
                    <template #default="scope">
                        <span class="title">{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="内容" >
                  <template #default="scope">
                    <pre>{{ scope.row.content }}</pre>
                  </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            tableData: []
        }
    },
    props: {
        data: Number
    },
    watch: {
        "data": function (params) {
            this.renderTable();
        }
    },
    created() {

    },
    mounted() {
        let app = this;
        this.renderTable();
    },
    methods: {
        renderTable() {
            this.tableData = []
            let methods = {
                title: '集成方式和步骤：',
                content: this.data.methods
            }
            let params = {
                title: '参数说明：',
                content: this.data.params
            }
            let example = {
                title: '调用示例：',
                content: this.data.example
            }
            let response = {
                title: '返回值示例：',
                content: this.data.response
            }
            let display = {
                title: '效果展示：',
                content: this.data.display
            }
            this.tableData.push(methods)
            this.tableData.push(params)
            this.tableData.push(example)
            this.tableData.push(response)
            this.tableData.push(display)
        }
    }
}
</script>

<style scoped>
#PluginDetail {
    width: 100%;
    height: 100%;
    padding-left: 1%;
}

#PluginDetail .itemList {
    width: 100%;
}

#PluginDetail .itemList .title {
    display: inline-block;
    margin-left: 10px;
    font-size: 15px;
    font-weight: bold;
}
</style>

<style>
.vertical-align-top {
    vertical-align: top !important;
}
</style>