【小趴菜前端实习日记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

相关推荐
用户99045017780098 分钟前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家11 分钟前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞1 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆1 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记1 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆1 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户21411832636021 小时前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军1 小时前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句1 小时前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜1 小时前
CommonJS与ESM
前端·javascript