1、代码生成器根据数据表结构生成前后端代码，将前端代码放置前端相关项目工程目录下。如下图所示 2、执行前端代码，结果如图： 3、目标是实现 上图是的 详情点击后出现不可编辑的弹出框，并显示相关字段内容，按如下步骤建立： （1）ScactivityrecordList.vue文件中增加 详情 按钮 红框内容是增加的详情按钮功能，注意绿框中的定义的功能名称。 handleDetail(record) 下面会用到 （2）建立一个详情内容显示界面 ScactivityrecorddetailModal.vue 内容如下：
<template> <j-modal :title="title" :width="1200" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen @ok="handleOk" @cancel="handleCancel" cancelText="关闭"> <a-card :bordered="false"> <detail-list title="基础信息"> <detail-list-item term="组织机构编号">{{model.publisherNo}}</detail-list-item> <detail-list-item term="组织机构名称">{{model.publisherName}}</detail-list-item> <detail-list-item term="组织机构MC">124355</detail-list-item> </detail-list> <a-divider style="margin-bottom: 32px"/> <detail-list title="详情信息"> <detail-list-item term="信息来源">{{model.newsSource}}</detail-list-item> <detail-list-item term="内容">{{model.newsContent}}</detail-list-item> <!--<detail-list-item term="评分">{{model.rank}}</detail-list-item>--> </detail-list> <a-divider style="margin-bottom: 32px"/> </a-card> <!--</page-layout>--> </j-modal> </template> <script> import PageLayout from '@/components/page/PageLayout' import { httpAction,getUserList } from '@/api/manage' import pick from 'lodash.pick' import DetailList from '@/components/tools/DetailList' const DetailListItem = DetailList.Item import moment from "moment" import ABadge from 'ant-design-vue/lib/badge/Badge' import STable from '../../profile/basic/Index' export default { name: "ScactivityrecorddetailModal", components: { PageLayout, DetailList, DetailListItem }, data () { return { title:"操作", visible: false, model: {}, labelCol: { xs: { span: 24 }, sm: { span: 5 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 }, }, confirmLoading: false, form: this.$form.createForm(this), } }, methods: { editdetail(record) { this.model = Object.assign({}, record) this.visible = true /*this.$nextTick(() => { this.form.setFieldsValue(pick(this.model, 'upShopNo', 'upShopName')) //时间格式化 })*/ }, close () { this.$emit('close'); this.visible = false; }, handleOk () { this.close() }, handleCancel () { this.close() }, } } </script> <style lang="less" scoped> </style>相关要显示的字段部分代码
（3）ScactivityrecordList.vue中加入下面代码 注意先后顺序 上图是已经提示出来了，我们要加入的内容标签提示。如果没有import 引入，就不会出现这个提示。个人在实现操作时体会到的。 （4）加入如下代码
this.$refs.modaldetailForm.title = '详情测试' this.$refs.modaldetailForm.editdetail(record)这部分的 modaldetailForm 名字一定要和上面设置的一个位置的内容一样。这一点一定要切记！！！！！！！
this.$refs.modaldetailForm.editdetail(record)这时的 editdetail 名称是在 刚才我们建立的ScactivityrecorddetailModal.vue文件中 以上代码建立完成后，就可以正确显示详情了。 同时用户也可以修改详情的具体格式和内容。
以上内容仅作为个人学习的笔记，有不正确的地方，请留言本人加以改正。
增加一张正确显示富文本编辑器写入数据表的文本图片
