vue实现动态表格增删功能
<!DOCTYPE html><html>
<head>
<link rel="stylesheet" href="../plugins/elementui/index.css">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/style.css">
<!-- 引入组件库 -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
.datatable {
position: relative;
box-sizing: border-box;
-webkit-box-flex: 1;
width: 100%;
max-width: 100%;
font-size: 14px;
color: rgb(96, 98, 102);
overflow: hidden;
flex: 1 1 0%;
}
.datatable td, .datatable th {
padding: 12px 0;
min-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
text-align: left;
}
</style>
</head>
<body class="hold-transition">
<div id="app">
<el-form
ref="form"
:rules="formRules"
:inline="true"
:model="form"
label-width="80px"
>
<!-- 固定项目 -->
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" palceholder="请输入姓名">
</el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone" palceholder="请输入手机号">
</el-input>
</el-form-item>
</el-form>
<el-button @click="addItem" type="primary">增加</el-button>
<!-- 动态增加项目 -->
<!-- 不止一个项目，用div包裹起来 -->
<div v-for="(item, index) in form.dynamicItem" :key="index">
<el-form>
<el-form-item
label="姓名"
:prop="'dynamicItem.' + index + '.name'"
:rules="{
required: true, message: '姓名不能为空', trigger: 'blur'
}"
>
<el-input v-model="item.name"></el-input>
</el-form-item>
<el-form-item
label="手机号"
:prop="'dynamicItem.' + index + '.phone'"
:rules="[
{required: true, message: '手机号不能为空', trigger: 'blur'},
{ pattern: /^1\d{9}$/, message: '目前只支持中国大陆的手机号码' }
]"
>
<el-input v-model="item.phone"></el-input>
</el-form-item>
<el-form-item>
<i class="el-icon-delete" @click="deleteItem(item, index)"></i>
</el-form-item>
</el-form>
</div>
</div>
</body>
<script>
var vue = new Vue({
el: '#app',
data() {
return {
form: {
name: '',
phone: '',
dynamicItem:[]
},
formRules: {
name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
phone: [
{required: true, message: '请输入手机号', trigger: 'blur'},
{ pattern: /^1\d{9}$/, message: '目前只支持中国大陆的手机号码' }
]
}
}
},
methods: {
addItem () {
this.form.dynamicItem.push({
name: '',
phone: ''
})
},
deleteItem (item, index) {
this.form.dynamicItem.splice(index, 1)
}
}
});
</script>
</html>
加上注释就能看懂了{:1_918:} 你不给js 光代码有啥用 真的要好好学习了 tokyohuang123 发表于 2021-3-12 09:19
你不给js 光代码有啥用
js可以自己找的，一般都是在项目中直接使用 怒江指海 发表于 2021-3-9 12:35
加上注释就能看懂了
贴到自己的项目中，运行，根据需要修改
页:
[1]