IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Element-ui踩坑 -> 正文阅读

[JavaScript知识库]Element-ui踩坑

Element-ui踩坑

验证图片上传

其实 加上 prop就行了,再图上传成功的时候再做个图片验证取消就可以,看着麻烦其实挺简单的

<el-form
          ref="ruleForm"
          label-position="top"
          :model="formData"
          :rules="rules"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="营业执照" prop="businessLicense">
                <el-upload
                  action=""
                  :auto-upload="false"
                  :before-upload="beforeAvatarUpload"
                  class="upload-demo"
                  drag
                  :limit="1"
                  :on-change="beforeUploadHandle"
                  :on-exceed="handleExceed"
                >
                  <vab-icon icon="upload-line" style="margin: 40px 0 20px" />
                  <div class="el-upload__text">
                    将文件拖到此处,或
                    <em>点击上传</em>
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

js文件

beforeUploadHandle(file) {
    if (file.type == 'change') return
    const formData = new FormData()
    formData.append('file', file.raw)
    uploadBatch(formData).then(
        (res) => {
            viewsData.formData.businessLicense = res.data[0].url
            ruleForm.value.validateField('businessLicense')
        },
        (err) => {
            console.log(err)
        }
    )
},

vue+element-ui el-table组件内表单验证问题

动态绑定 prop :rechargeCommodityDTOS.’ + $index + ‘.cashAmount’

<el-table :data="popFormData.rechargeCommodityDTOS">
    <el-table-column label="充值金额">
        <template #default="{ row, $index }">
<el-form-item
              :prop="'rechargeCommodityDTOS.' + $index + '.cashAmount'"
              :rules="{
                      required: true,
                      message: '请输入充值金额',
                      trigger: ['blur', 'change'],
                      }"
              >
    <el-input
              v-model="row.cashAmount"
              class="filter"
              placeholder="请输入充值金额"
              type="number"
              />
            </el-form-item>
        </template>
    </el-table-column>
</el-table>

el-table 图片上传

文件变动的时候,用箭头函数接收下file ,再传到文件上传的函数里即可,这样就可以同时将file和row一起放进去了

<el-upload action="" class="upload-demo" :on-change="(file) => { beforeUploadHandle(file, row)}
">
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-14 09:51:45  更:2022-05-14 09:52:45 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:41:23-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码