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

相关推荐
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
前端君5 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6146 小时前
Web前端面试题(2)
前端
知识分享小能手6 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光7 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite