查看详情

博客介绍了表格数据中查看详情的功能,与修改功能的区别。还阐述了编写查看详情方法,包括错误捕捉。详细说明了根据公告ID查询公告信息的过程,涉及多表连接,以及查找公告内容文件、搜索附件文档等操作,最终显示公告数据和附件列表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开发工具与关键技术:VS与MVC
作者:茅凯翔
撰写时间:2019年5月1日

不管你是新增了数据,还是修改了数据,总要有一个键是查看你所新增/修改的数据,删除就不用说,都删了,还看啥。那这个键就是详情。详情虽然跟修改很像,但是修改是回填数据,详情却是不能改的,只能查看。一般在有增删查改的表格数据里都会有查看详情。
首先写一个方法,给方法一个名字(NoticeDetailed),(int?)表示可空类型,就是一种特殊的值类型,它的值可以为null,用于给变量设初值的时候,给变量(int类型)赋值为null,而不是0。<这句话借用与老师的解释>。方法名字写好就在方法里面给try捕捉错误,若捕捉到错误就会返回到下面的链接("/Main/Login"),意思就是重新回到视图页面。
在这里插入图片描述
接下来要根据公告ID来查询出公告的信息,开始查询,建个自定义表(notice)来接收数据,这个表(tbNotices)来自myModels的(PW_NoticeTable)所建的自定义表,连接myModels的公告类型明细表(SYS_NoticeTypeDetail)所建的自定义公告类型明细表(tbNoticeTypeDetail),公告类型明细ID的公告表等同于公告类型明细ID的公告类型明细表,连接myModels的公告类型表(SYS_NoticeTypeTable)所建的自定义公告类型表(tbNoticeType),公告类型ID的公告类型明细表等同于公告类型ID的公告类型表,连接myModels的用户表(PW_User)所建的自定义用户表(tbUser),用户ID的公告表等同于用户ID的用户表,连接myModels的教师表(PW_Teacher)所建的自定义教师表(tbTeacher),用户ID的用户表等同于用户ID的教师表,在公告ID里的自定义公告表等于(noticeId),选择出新的参数。自定义的公告表的公告名称赋值给数据库的(NoticeName),自定义的公告表的发布时间赋值给数据库的(ReleaseTime),自定义的公告表的相关学校赋值给数据库的(schoolRelated),自定义的公告表的公告内容赋值给数据库的(NoticeContent),自定义的公告表的编辑者赋值给数据库的(Editor),自定义的公告表的公告类型名称赋值给数据库的(NoticeTypeName),自定义的公告表的公告类型明细名称赋值给数据库的(NoticeTypeDetailName),自定义的公告表的日期时间赋值给数据库的(ReleaseTime),将日期时间值转换成“日期/时间”形式的字符串值,转换的对象为字符串。
在这里插入图片描述
电脑按照文本文件名在服务器里的主路径找到存放公告内容的路径。然后if判断,系统的IO按照文本文件名去确定指定的文件是否存在,若找不到就会返回下面图的p标签的内容,若找到了,系统的IO就会打开文本文件,然后读取里面的公告内容。
在这里插入图片描述
List可以提供对(Files)文档进行搜索,建一个自定义表(files)来接收数据,这个表(tbFile)来自myModels的(PW_File)所建的自定义表,连接myModels的公告表(PW_NoticeTable)所建的自定义公告表(tbNoticeTable),公告ID里的附件表等同于公告ID里的公告表,连接myModels的文件类型表(SYS_FileType)所建的自定义附件类型表(tbFileType),附件类型ID里的文件表等同于附件类型ID里的附件类型表,在公告ID里的附件表等于公告id,选择出新的参数,附件表的附件ID赋值到数据库的(FileID),附件表的附件类型ID赋值到数据库的(FileTypeID),附件表的文档赋值到数据库的(Files),附件类型表的附件类型名称赋值到数据库的(FileTypeName),附件表的文档赋值到数据库的(FileName)。显示出公告的一条数据,也显示出公告对应的附件列表。
在这里插入图片描述

### 关于 ElementUI “查看详情” 功能的实现 ElementUI 并未提供专门名为“查看详情”的组件,但在实际项目中,“查看详情”功能可以通过其他基础组件组合实现。以下是常见的两种方式: #### 方式一:通过 `el-dialog` 实现查看详细信息 `el-dialog` 是 ElementUI 提供的一个对话框组件,可以用来显示详细的弹窗内容。 ```html <template> <div> <!-- 显示按钮 --> <el-button type="primary" @click="openDialog">查看详情</el-button> <!-- 对话框 --> <el-dialog title="详情" :visible.sync="dialogVisible"> <p>这里是具体的详细信息。</p> <p>{{ detailInfo }}</p> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false, // 控制对话框显隐 detailInfo: "这是一些示例数据", // 详细信息的内容 }; }, methods: { openDialog() { this.dialogVisible = true; // 打开对话框 }, }, }; </script> ``` 上述代码展示了如何利用 `el-dialog` 来创建一个简单的“查看详情”功能[^1]。 --- #### 方式二:通过路由跳转到详情页 如果需要更复杂的“查看详情”逻辑,比如单独的详情页面,则可以通过 Vue Router 跳转至另一个页面来展示详细信息。 ##### 主页面 (列表页) ```html <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column fixed="right" label="操作" width="120"> <template slot-scope="scope"> <el-button type="text" size="small" @click="viewDetail(scope.row.id)">查看详情</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { id: 1, name: "记录1" }, { id: 2, name: "记录2" }, ], }; }, methods: { viewDetail(id) { this.$router.push(`/detail/${id}`); // 路由跳转到详情页 }, }, }; </script> ``` ##### 详情页面 ```html <template> <div> <h1>详情页</h1> <p>ID: {{ $route.params.id }}</p> <p>这是 ID={{ $route.params.id }} 的详细信息。</p> </div> </template> <script> export default { mounted() { console.log("当前ID:", this.$route.params.id); }, }; </script> ``` 这种方式更适合大型应用,能够更好地分离关注点,并支持浏览器历史记录管理[^4]。 --- ### 修改样式注意事项 当使用 `scoped` 属性时,可能会遇到子组件样式无法生效的问题。此时可采用以下解决方案之一: - 使用 `/deep/` 或 `::v-deep()` 穿透作用域限制[^3]。 例如: ```css <style scoped> /deep/ .el-dialog__body { padding: 20px; } </style> ``` 或者推荐的方式(Vue 3 中适用): ```css <style scoped> :deep(.el-dialog__body) { padding: 20px; } </style> ``` --- ### 总结 无论是通过 `el-dialog` 还是路由跳转,都可以灵活实现“查看详情”功能。具体选择取决于业务需求以及项目的复杂程度。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值