vue v-for 使用
2024-09-08 18:35:57
html
<div>
<el-button @click="addListItem" type="primary" style="position: absolute;">+</el-button>
<div v-for="(item, index) in formData.liuchengs" :key="index" :id="index">
<el-form-item label="流程:" :prop="'liuchengs.' + index + '.no'" :rules="{required: true, message: '', trigger: 'blur'}">
<el-input v-model="item.no" :clearable="true" style="width: 250px;" placeholder="请输入" />
</el-form-item>
<el-form-item label="件数:" :prop="'liuchengs.' + index + '.num'" :rules="{required: true, message: '', trigger: 'blur'}">
<el-input v-model="item.num" :clearable="true" style="width: 250px;" placeholder="请输入" />
</el-form-item>
<el-form-item label="问题" :prop="'liuchengs.' + index + '.qus'">
<el-input v-model="item.qus" :clearable="true" style="width: 150px;" placeholder="请输入" />
</el-form-item>
<el-button @click="delListItem(index)" type="danger">删 除</el-button>
</div>
</div>
js
<script>export default {
name: 'CombinationCard',
data() {
return {
formData: {
liuchengs: [{
no: '',
num: '',
qus: '',
}],
}
};
},
created(){
this.addListItem() //打开页面执行点击事件
},
methods: {
addListItem() {
this.formData.liuchengs.push({
no: '',
num: '',
qus: '',
});
},
delListItem(index) {
if(this.formData.liuchengs.length > 1){
this.formData.liuchengs.splice(index,1);
}else{
this.$alert('最后一个无法删除!', '提示信息', {
confirmButtonText: '确定'
});
}
},
},
}
const formData = ref({
name: '',
spec: '',
batchNo: '',
classid: '',
largePlateNum: '',
packerNo: '',
date: new Date(),
recycler: '',
liuchengs: [],
})
</script>
实例
最新文章
- 【技巧】为ComboBox添加自动提示
- windows10降低IE版本
- java集合-LinkedList
- 关于VSS上的项目源码管理的注意问题
- 必填项(required)
- Java为什么能跨平台运行
- 使用Qemu调试内核
- Ibatis.net防Sql注入
- c++崩溃错误2
- Jquery 遍历数组之grep()方法介绍
- jvm学习006 jvm内存结构分配
- Java的单例模式
- Eslint报错整理与解决方法(持续整理)
- GsonUtil工具类
- tomcat apr
- Centos7.3+uwsgi+Nginx部署Django程序
- Oracle(字符函数)
- java,sort函数的深刻理解
- Executor框架(一)
- Zookeeper命名服务&mdash;&mdash;生成分布式有序且唯一id