el-table数据更新视图不更新的问题、el-dialog居中展示、el-form表单验证之对象属性验证、vue2过滤器
一、el-table数据更新视图不更新的问题
手动触发元素更新:
二、el-dialog居中展示
三、el-form表单验证之对象属性验证
参考链接: link
做项目时遇到了需要对数组对象中的属性进行验证
el-input需要放在el-form-item中,通过下标找到对象属性
<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