tnblog
首页
视频
资源
登录

vue3 页面基础模板(里边包括弹窗以及暴露方法出去,父组件调用),也是一个格子报表统计的模板,基础的请求,常用的变量定义等

312人阅读 2025/4/30 16:30 总访问:735440 评论:0 收藏:0 手机
分类: 前端

页面模板如下,里边包括的弹窗

还包括了一个格子报表统计的模板,基础的请求等

代码如下:

  1. <template>
  2. <el-dialog v-model="userWaterFeeStatisticsDialogVisible" title="水费统计" width="789px" destroy-on-close>
  3. <div class="userWaterFeeStatistics-container">
  4. <!-- border-bottom: 1px solid #eee; padding: 16px 0px;-->
  5. <div style=" position: relative">
  6. <div class="boxContainer">
  7. <div class="boxitem boxitem1">
  8. <div class="contentWrap">
  9. <div class="item-title">总缴费</div>
  10. <div class="item-content">1</div>
  11. <div class="item-icon"></div>
  12. </div>
  13. </div>
  14. <div class="boxitem boxitem2">
  15. <div class="contentWrap">
  16. <div class="item-title">缴费次数</div>
  17. <div class="item-content">15030</div>
  18. <div class="item-icon"></div>
  19. </div>
  20. </div>
  21. <div class="boxitem boxitem3">
  22. <div class="contentWrap">
  23. <div class="item-title">欠费</div>
  24. <div class="item-content">216.3万</div>
  25. <div class="item-icon"></div>
  26. </div>
  27. </div>
  28. <!-- <div class="boxitem boxitem4">
  29. <div class="contentWrap">
  30. <div class="item-title">粉丝数</div>
  31. <div class="item-content">30</div>
  32. <div class="item-icon"></div>
  33. </div>
  34. </div> -->
  35. <div class="boxitem boxitem5">
  36. <div class="contentWrap">
  37. <div class="item-title">总用水量</div>
  38. <div class="item-content">120</div>
  39. <div class="item-icon"></div>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </el-dialog>
  46. </template>
  47. <script setup lang="ts" name="tasks">
  48. import { defineAsyncComponent, reactive, onMounted, toRefs, ref } from 'vue';
  49. import request from '/@/utils/requestTools';
  50. const searchForm = ref({
  51. userNickname: '',
  52. userId:''
  53. });
  54. // 表格数据
  55. const tableData = ref<any[]>([]);
  56. // 统计数据
  57. const statisticsData = ref<any>({});
  58. onMounted(() => {
  59. });
  60. const userWaterFeeStatistics = async () => {
  61. const result: any = await request.get('/watertap/api/WaterFeeCollection/UserWaterFeeStatistics', {
  62. userId: searchForm.value.userId
  63. });
  64. statisticsData.value = result.data
  65. }
  66. const userWaterFeeStatisticsDialogVisible = ref(false);
  67. // 打开弹窗的方法
  68. const openUserWaterFeeStatistics = (row: any) => {
  69. searchForm.value.userId = row.id
  70. // 调用查询的数据
  71. userWaterFeeStatistics()
  72. userWaterFeeStatisticsDialogVisible.value = true;
  73. };
  74. //暴露方法出去
  75. defineExpose({
  76. openUserWaterFeeStatistics,
  77. });
  78. </script>
  79. <style scoped="scoped" lang="scss">
  80. .userWaterFeeStatistics-container {
  81. margin-top: -20px;
  82. .boxContainer {
  83. display: flex;
  84. }
  85. .contentWrap {
  86. align-self: center;
  87. }
  88. .boxitem {
  89. position: relative;
  90. flex: 1;
  91. height: 75px;
  92. border-radius: 6px;
  93. /* padding-left: 15px;*/
  94. display: flex;
  95. text-align: center;
  96. justify-content: center;
  97. }
  98. .boxitem .item-title {
  99. font-size: 14px;
  100. text-align: center;
  101. font-weight: bold;
  102. }
  103. .boxitem .item-content {
  104. font-size: 14px;
  105. font-family: Microsoft YaHei;
  106. font-weight: 400;
  107. margin-top: 4px;
  108. text-align: center;
  109. font-weight: bold;
  110. }
  111. .boxitem .item-icon {
  112. position: absolute;
  113. bottom: 8px;
  114. right: 10px;
  115. }
  116. .boxitem1 {
  117. background: linear-gradient(135deg, #ddf6f2, #f1fffd);
  118. }
  119. .boxitem1 .item-title {
  120. color: #27cda7;
  121. }
  122. .boxitem1 .item-content {
  123. color: #27cda7;
  124. }
  125. .boxitem2 {
  126. background: linear-gradient(135deg, #e1edfe, #f2f7fe);
  127. }
  128. .boxitem2 .item-title {
  129. color: #60a2ff;
  130. }
  131. .boxitem2 .item-content {
  132. color: #60a2ff;
  133. }
  134. .boxitem3 {
  135. background: linear-gradient(135deg, #fff1f1, #fff9f9);
  136. }
  137. .boxitem3 .item-title {
  138. color: #ff6f6f;
  139. }
  140. .boxitem3 .item-content {
  141. color: #ff6f6f;
  142. }
  143. .boxitem4 {
  144. background: linear-gradient(135deg, #ddfaff, #effdff);
  145. }
  146. .boxitem4 .item-title {
  147. color: #13c6cd;
  148. }
  149. .boxitem4 .item-content {
  150. color: #13c6cd;
  151. }
  152. .boxitem5 {
  153. background: linear-gradient(135deg, #eae6ff, #f1eeff);
  154. }
  155. .boxitem5 .item-title {
  156. color: #8c7aff;
  157. }
  158. .boxitem5 .item-content {
  159. color: #8c7aff;
  160. }
  161. /*间距相等*/
  162. .boxContainer .boxitem + .boxitem {
  163. margin-left: 20px;
  164. }
  165. }
  166. </style>

父组件使用上面的

  1. <template>
  2. <div class="system-user-container layout-padding">
  3. <el-card shadow="hover" class="layout-padding-auto">
  4. <el-table :data="state.tableData.data" v-loading="state.tableData.loading">
  5. <el-table-column label="操作" width="169">
  6. <template #default="scope">
  7. <el-button size="small" text type="primary" @click="openUserWaterFeeStatistics(scope.row)"
  8. >水费统计</el-button>
  9. </template>
  10. </el-table-column>
  11. </el-table>
  12. </el-card>
  13. <!-- 水费统计弹窗 -->
  14. <UserWaterFeeStatistics ref="userWaterFeeStatisticsRef"></UserWaterFeeStatistics>
  15. </div>
  16. </template>
  17. <script setup lang="ts" name="systemUser">
  18. import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
  19. import { ElMessageBox, ElMessage } from 'element-plus';
  20. import request from '/@/utils/requestTools';
  21. import { dayjs } from 'element-plus';
  22. import UserWaterFeeStatistics from './component/userWaterFeeStatistics.vue';
  23. const userWaterFeeStatisticsRef = ref()
  24. const openUserWaterFeeStatistics = (row:any) =>{
  25. userWaterFeeStatisticsRef.value.openUserWaterFeeStatistics(row)
  26. }
  27. </script>
  28. <style scoped lang="scss">
  29. .system-user-container {
  30. :deep(.el-card__body) {
  31. display: flex;
  32. flex-direction: column;
  33. flex: 1;
  34. overflow: auto;
  35. .el-table {
  36. flex: 1;
  37. }
  38. }
  39. }
  40. </style>

欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue3vue组件props给一个对象参数。vue组件间传参数vue父组件给子组件传参数。组件参数类型。父组件调用子组件的方法。vue组件事件监听给子组件传递方法子组件调用父组件方法

[TOC]组件可以使用props给组件传值,可以同时传递多个,可以是任意类型,比如字符串或者对象。 下面是个简单的例子: &lt...

vue3最基础的数据加载表格table

vue3表格加载一点静态数据 &lt;template&gt; &lt;el-table :data=&quot;tableData&quot; style=&quot;width: 100%&quot...

vue3 Element Plus 表单输入框放到一行

当垂直方向空间受限且表单较简单时,可以在一行内放置表单。 通过设置 inline 属性为 true 可以让表单域变为行内的表单域...

vue3 Element ui Plus 表格 分页vue3 el-pagination分页

其实就是el-pagination控件的使用而已 &lt;template&gt; &lt;div&gt; &lt;el-table :data=&quot;tableData&quot; ...

vue触发a标签的点击事件。vue3 dom操作 触发点击事件 。文件选择库只会触发一次change事件的问题

[TOC]vue触发a标签的点击事件直接操作dom节点的方式比较简单 &lt;button @click=&quot;handleBtnClick&quot;&gt;点击按钮&...

vue3 ref的使用多个ref的使用。通过ref触发点击事件

多个ref获取的方法可以使用一样的,通过变量名来区分就行了 const vabUploadRef = ref() const multipleTableRef = ref() ...

vue elementuivue3 element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传

比如上传文件的时候额外传递两个select选择的值 前台前面上传文件的时候要提供默认参数很简单,el-upload绑定一个data即可...

vuevue3 打开新页面页面跳转。vue跳转到一个新页面。vue路由传参vue3路由传参vue3 获取路由参数

[TOC]VUE页面跳转本地页面跳转 goApplicationCenter() { //进行页面跳转 let path = &quot;/application-center&quo...

vuevue3组件封装vue组件模板。简单组件模板。基础组件模板。vue引入自定义的组件。vue使用自定义的组件。插槽slot使用。vue封装格子效果一块一块的grid布局效果

[TOC]vue封装组件的简单模板贴一个简单模板方便自定义组件的时候直接复制。 注意:vue2引用组件除了引入还需要在components...

.net6 Signalr+vue3 的运用(上)

.net6 Signalr+Vue3 的运用(上)[TOC] 什么是 SignalR?ASP.NET Core SignalR 是一个开放源代码库,可用于简化向应用添加...

.net6 Signalr+vue3 的运用(下)

.net6 Signalr+Vue3 的运用(下)[TOC] 上篇链接:https://www.tnblog.net/hb/article/details/7961SignalR 中的用户 Sig...

.net6 Signalr+vue3 配合Ingress Nginx的运用

.net6 Signalr+Vue3 配合Ingress Nginx的运用[TOC] 结合上篇:https://www.tnblog.net/hb/article/details/7963 项目打...

vue3 Element Plus 表格使用vue3常用界面搭配。vue3基础模板使用

一个简单的表格加时间搜索界面效果如下: 代码如下: &lt;template&gt; &lt;div class=&quot;app-container&quot;&g...

vue3 如何加prototype。vue3使用globalProperties

在2.X版本中创建一个vue 实例是通过 new Vue()来实现的,到了3.X中则是通过使用createApp这个 API返回一个应用实例,并且可...
真诚,善良,美好,温柔,皆是你
排名
9
文章
120
粉丝
5
评论
5
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术