【小趴菜前端实习日记4】

el-table数据更新视图不更新的问题、el-dialog居中展示、el-form表单验证之对象属性验证、vue2过滤器

一、el-table数据更新视图不更新的问题

手动触发元素更新:

二、el-dialog居中展示


三、el-form表单验证之对象属性验证

参考链接: link

做项目时遇到了需要对数组对象中的属性进行验证

el-input需要放在el-form-item中,通过下标找到对象属性

js 复制代码
   <el-form-item label="分配IP段:" prop="zt_ip_ranges">
          <div class="ipBox" v-for="(item, index) in params.zt_ip_ranges" :key="index">
            <template>
              <el-form-item :prop="'zt_ip_ranges.' + index + '.start'" :rules="[{ required: true, message: '开始IP不能为空', trigger: 'blur' },
              ]"  style="  margin-bottom: 0 ">
                <el-input clearable v-model="item.start" placeholder="请输入开始IP" label="开始IP" size="mini"></el-input>
              </el-form-item>
              <div style="padding:0 10px">-</div>
              <el-form-item :prop="'zt_ip_ranges.' + index + '.end'" :rules="[{ required: true, message: '结束IP不能为空', trigger: 'blur' },

              ]"  style="  margin-bottom: 0 ">
                <el-input clearable v-model="item.end" placeholder="请输入结束IP" label="结束IP" size="mini"></el-input>
              </el-form-item>

              <el-button type="primary" size="mini" style="margin:0 10px;" @click="showAddIP()">新增</el-button>
              <el-button type="danger" size="mini" style="margin:0 10px;" @click="deleteIp(item)">删除</el-button>
            </template>
          </div>
          <div v-if="params.zt_ip_ranges.length === 0">
            <el-button type="primary" @click="showAddIP()">新增</el-button>
          </div>
        </el-form-item>

四、vue2过滤器

链接: link

相关推荐
长路 ㅤ   1 分钟前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
独立开阀者_FwtCoder15 分钟前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
张晓~183399481211 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰2 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669132 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑2 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue772 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程