前端需求:选择学校日期,选择日期范围,附件, 三个选项放在同一个ediv 并且可以有操作按钮对改div进行增删改查依赖element-ui el-from怎么实现
时间: 2024-02-01 11:14:09 浏览: 81
springboot+vue+elementui实现增删改查和分页查询
5星 · 资源好评率100%
可以使用 Element UI 的表单组件 `el-form` 和表单项组件 `el-form-item` 来实现这个需求。其中,选择学校日期和选择日期范围可以使用 `el-date-picker` 组件,附件可以使用 `el-upload` 组件,操作按钮可以使用 `el-button` 组件。
代码示例:
```
<template>
<el-form :model="form" ref="form" label-width="120px">
<el-form-item label="选择学校日期">
<el-date-picker v-model="form.schoolDate"></el-date-picker>
</el-form-item>
<el-form-item label="选择日期范围">
<el-date-picker v-model="form.dateRange" type="daterange"></el-date-picker>
</el-form-item>
<el-form-item label="附件">
<el-upload
class="upload-demo"
action="//jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="form.attachmentList"
:before-upload="beforeUpload">
<el-button size="small" type="primary">上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addFormItem">新增选项</el-button>
<el-button type="danger" @click="deleteFormItem">删除选项</el-button>
</el-form-item>
<div v-for="(item, index) in form.items" :key="index">
<el-form-item :label="'选项 ' + (index + 1)">
<el-input v-model="item.value"></el-input>
</el-form-item>
</div>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
schoolDate: '',
dateRange: '',
attachmentList: [],
items: []
}
};
},
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt500k = file.size / 1024 < 500;
if (!isJPG || !isLt500k) {
this.$message.error('上传文件只能是 JPG/PNG 格式,且不超过 500KB');
return false;
}
return true;
},
handlePreview(file) {
console.log('preview', file);
},
handleRemove(file) {
console.log('remove', file);
},
addFormItem() {
this.form.items.push({ value: '' });
},
deleteFormItem() {
this.form.items.pop();
}
}
};
</script>
```
在这个示例中,我们定义了一个 `form` 对象来存储表单数据。其中,`schoolDate` 和 `dateRange` 分别用来存储选择学校日期和选择日期范围的值,`attachmentList` 用来存储上传的附件列表,`items` 用来存储用户新增的选项。
在模板中,我们使用 `el-form` 组件作为表单的容器,并使用 `el-form-item` 组件来包裹每个表单项。对于选择学校日期和选择日期范围,我们使用 `el-date-picker` 组件来实现。对于附件,我们使用 `el-upload` 组件来实现。在操作按钮方面,我们直接使用 `el-button` 组件即可。
最后,我们通过 `v-for` 指令来动态渲染用户新增的选项。每个选项都是一个 `el-form-item` 组件,包含一个 `el-input` 组件用来输入选项的值。
在操作按钮方面,我们提供了新增选项和删除选项两个按钮。当用户点击新增选项按钮时,我们通过 `push` 方法向 `form.items` 数组中添加一个新的选项对象。当用户点击删除选项按钮时,我们通过 `pop` 方法从 `form.items` 数组中删除最后一个选项对象。
这样,我们就完成了该需求的实现。
阅读全文