Vue3+ElementPlus+TS开发业务功能的问题汇总(持续更新)

1.开发表单弹框功能时遇到两个问题:加入了校验规则后,无论下拉框是否选择数据下面的红色提示都会触发显示不会自动隐藏 ; 另外,新增的功能在提交后数据无法重置,这种在修改时可能会出现,但新增正常情况是不会出现的,故此一脸懵逼。

最后查找原因是因为表单绑定model时候用错了方法,用的v-model指令进行的绑定,而不是:model的方式绑定的模型,两者是有区别的,其中:model相当于v-bind:model这个指令而不是v-model这样;

具体区别可以参考这篇文章:

v-model和:model的区别_:model和v-model区别-优快云博客

 2.使用上传文件功能,上传文件如果没有单独的文件上传服务器或者上传文件的服务和前端页面地址并不一致的情况下需要自定义请求调用上传服务。下面是具体的实现代码:

<template>
<el-form-item label="图片" style="flex-basis: 100%">
        <el-upload
          v-model:file-list="fileLists"
          :http-request="uploadFile"
          list-type="picture-card"
          multiple
          :on-preview="handlePictureCardPreview"
         
### 实现 Element Plus 表格多行合计功能 为了在 `Element Plus` 的表格组件中实现多行合计功能,可以通过自定义计算属性来动态汇总每一列的数据,并将其展示在表格的最后一行。具体方法如下: #### 方法概述 通过监听数据变化并实时更新总计数值,在模板部分利用 `<slot>` 插槽机制向表格追加一行为总计行。 #### 代码示例 ```html <template> <el-table :data="tableData" style="width: 100%"> <!-- 定义常规列 --> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="amount1" label="金额1"> <template #default="scope">{{ scope.row.amount1 }}</template> </el-table-column> <el-table-column prop="amount2" label="金额2"> <template #default="scope">{{ scope.row.amount2 }}</template> </el-table-column> <!-- 总计行 --> <el-table-column fixed="bottom" align="right"> <template #footer> <span>总计</span> <span>{{ totalAmount1 }} / {{ totalAmount2 }}</span> </template> </el-table-column> </el-table> </template> <script lang="ts"> import { defineComponent, computed } from &#39;vue&#39;; export default defineComponent({ setup() { const tableData = [ { name: "张三", amount1: 100, amount2: 200 }, { name: "李四", amount1: 300, amount2: 400 } ]; // 计算总和 const totalAmount1 = computed(() => tableData.reduce((acc, cur) => acc + Number(cur.amount1), 0)); const totalAmount2 = computed(() => tableData.reduce((acc, cur) => acc + Number(cur.amount2), 0)); return { tableData, totalAmount1, totalAmount2 }; } }); </script> ``` 此段代码展示了如何创建一个简单的带有总计行的表格[^1]。这里使用了 Vue Composition API 来管理状态以及计算属性来进行求和运算。注意,实际应用时可能还需要考虑更多细节,比如处理不同类型的字段、格式化数字等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值