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

相关推荐
求知摆渡2 分钟前
从零开始搭建typecho
前端·后端
极客悟道2 分钟前
彻底搞懂Java值传递:90%开发者都会踩的坑
前端·后端
葡萄城技术团队5 分钟前
JavaScript 异步编程指南:async/await 与 Promise 该怎么选?
javascript
Mintopia12 分钟前
计算机图形学中的毛发与布料模拟:让虚拟世界动起来的魔法
前端·javascript·计算机图形学
小飞悟16 分钟前
组件通信的艺术:从 props 钻井到 context 共享的进化之路
前端·javascript·设计模式
Mintopia16 分钟前
Three.js 中正切函数在相机视野里的那些事儿
前端·javascript·three.js
Dream耀19 分钟前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
十盒半价19 分钟前
Stylus 伪元素:让 CSS 玩出 “无中生有” 的新花样
前端·css·trae
红衣信20 分钟前
React 中 useContext 的使用与状态共享详解
前端·react.js·面试
断竿散人21 分钟前
JavaScript 事件系统完全指南:从事件流原理到现代化事件处理实战
前端·javascript