使用element-ui写一个表单,点击xxx按钮,弹出表单,表单内容包括:项目名称、自动化用例数、测试说明用例数、覆盖率,自动化用例数、测试说明用例数、限制只填数字,覆盖率限制只填百分比
时间: 2024-10-22 14:15:36 浏览: 37
在Element UI中创建一个动态弹出表单,你可以按照以下步骤操作:
首先,安装并引入Element UI库:
```bash
npm install element-ui --save
```
然后,在你的Vue组件中设置表单结构,并使用`el-dialog`展示弹窗:
```html
<template>
<div>
<el-button @click="showForm">点击显示表单</el-button>
<el-dialog :visible.sync="dialogVisible" title="表单填写">
<form @submit.prevent="handleFormSubmit">
<el-form label-width="80px">
<el-form-item label="项目名称">
<el-input v-model="projectName" placeholder="请输入项目名称"></el-input>
</el-form-item>
<el-form-item label="自动化用例数">
<el-input type="number" v-model.number="autoCases" placeholder="请输入自动化用例数"></el-input>
</el-form-item>
<el-form-item label="测试说明用例数">
<el-input type="number" v-model.number="testCases" placeholder="请输入测试说明用例数"></el-input>
</el-form-item>
<el-form-item label="覆盖率">
<el-input type="number" v-model.number="coverage" placeholder="请输入覆盖率(百分比)" :max="100" :min="0"></el-input>
</el-form-item>
<!-- 可能需要添加验证规则 -->
<el-form-item label="提示">
* 数字仅限于整数,覆盖率仅限于0-100%
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="cancelForm">取消</el-button>
</el-form-item>
</el-form>
</form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
projectName: '',
autoCases: 0,
testCases: 0,
coverage: 0,
};
},
methods: {
showForm() {
this.dialogVisible = true;
},
handleFormSubmit() {
// 这里可以处理表单数据,例如发送到API等
console.log('表单数据:', { projectName, autoCases, testCases, coverage });
this.submitForm();
},
submitForm() {
// 提交表单后关闭对话框
this.dialogVisible = false;
},
cancelForm() {
this.dialogVisible = false;
},
},
};
</script>
```
在这个例子中,我们创建了一个包含四个输入字段的表单,每个输入都有特定的数据验证规则,比如自动化用例数和测试说明用例数要求只能输入数字,覆盖率只允许0-100%的值。
阅读全文