<el-dialog :title="formEditTitle" :visible.sync="dialogEdittVisible" width="700px"> <div style="display: flex; justify-content: center; height: 40px;"> <span style="align-self: center;">总量:</span> <el-input id="input-box" @input="forceUpdate" placeholder="在这里输入内容" v-model="dialogObj.name" style="width: 250px;"></el-input> <div class="radiobox" style="flex: 1; height: 100px; text-align: center; margin-left: 20px;"> <el-form> <span>分项:</span> <el-select filterable v-model="dialogObj.indexName" placeholder="请选择" @change="showSelectedValue" style="flex: 1; height: 100px; text-align: center;"> <el-option v-for="(itemOne, item) in templateList" :key="item" :label="itemOne" :value="itemOne" > </el-option> </el-select> </el-form> </div> <el-button @click="addToSelectedData" style="height: 40px;" :clearable="false">添加</el-button> </div> <el-table :data="dialogObj.children"> <el-table-column prop="name" label="分项"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="deleteSelectedData(scope.$index)">删除</el-button> </template>怎么实现点击添加之后刷新表单页面
时间: 2023-07-03 21:04:58 浏览: 102
你可以在 `addToSelectedData` 方法中,添加成功后重新获取数据并更新表格,例如:
```
addToSelectedData() {
// 添加数据的逻辑
// ...
// 重新获取数据并更新表格
axios.get('/api/getData').then(res => {
this.dialogObj.children = res.data
})
}
```
其中,`/api/getData` 是你后端提供的获取数据的接口。当添加数据成功后,就会重新获取数据并更新表格。
相关问题
<el-dialog :title="formEditTitle" :visible.sync="dialogEdittVisible" width="700px"> <div style="display: flex; justify-content: center; height: 40px;"> <span style="align-self: center;">总量:</span> <el-input id="input-box" @input="forceUpdate" placeholder="在这里输入内容" v-model="dialogObj.name" style="width: 250px;"></el-input> <div class="radiobox" style="flex: 1; height: 100px; text-align: center; margin-left: 20px;"> <el-form> <span>分项:</span> <el-select filterable v-model="dialogObj.indexName" placeholder="请选择" @change="showSelectedValue" style="flex: 1; height: 100px; text-align: center;"> <el-option v-for="(itemOne, item) in templateList" :key="item" :label="itemOne" :value="itemOne" > </el-option> </el-select> </el-form> </div> <el-button @click="addToSelectedData" style="height: 40px;" :clearable="false">添加</el-button> </div> <el-table :data="dialogObj.children"> <el-table-column prop="name" label="分项"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button @click="deleteSelectedData(scope.$index)">删除</el-button> </template>怎么实现提交之后刷新页面
如果你想在提交数据后刷新页面,可以在提交数据成功的回调函数中使用 `window.location.reload()` 方法来刷新页面。举个例子,你可以在提交数据的方法中添加以下代码:
```
axios.post('/submitData', this.formData).then(response => {
// 提交成功后的回调函数
window.location.reload(); // 刷新页面
}).catch(error => {
console.log(error);
});
```
这样,在提交数据成功后,页面就会重新加载并刷新数据。当然,为了避免重复提交数据,你还需要在提交数据的按钮上添加禁用属性,例如:
```
<el-button :loading="submitting" @click="submitData" :disabled="submitting">提交</el-button>
```
其中,`submitting` 是一个响应式的变量,用来表示当前是否正在提交数据。在提交数据方法中,你需要将 `submitting` 设置为 `true`,并在提交成功或失败后将其设置为 `false`。
如何给el-dialog实现响应式
要给 el-dialog 实现响应式,可以使用 CSS 的媒体查询和 flex 布局。具体实现步骤如下:
1. 在 el-dialog 的外层包裹一个 div 容器,设置该容器为 flex 布局,并将子元素(el-dialog)的宽度设置为 100%。
2. 使用 CSS 媒体查询来设置 el-dialog 在不同屏幕尺寸下的样式,如:
```
@media screen and (max-width: 768px) {
.dialog-container {
flex-direction: column;
}
.dialog-container .el-dialog {
width: 100%;
}
}
```
在上述代码中,当屏幕宽度小于 768px 时,将容器的 flex-direction 设置为 column(纵向排列),并将 el-dialog 的宽度设置为 100%。
3. 根据需要设置 el-dialog 的最大宽度和最大高度,以保证在不同屏幕尺寸下都能正常显示。
下面是一个示例代码:
```html
<template>
<div class="dialog-container">
<el-dialog
title="对话框标题"
:visible.sync="dialogVisible"
:max-width="maxWidth"
:max-height="maxHeight"
>
<p>对话框内容</p>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
maxWidth: '800px',
maxHeight: '600px'
}
}
}
</script>
<style>
.dialog-container {
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.dialog-container {
flex-direction: column;
}
.dialog-container .el-dialog {
width: 100%;
}
}
</style>
```
在上述示例中,我们将 el-dialog 包裹在一个名为 dialog-container 的 div 容器中,使用 flex 布局将其居中显示。在不同屏幕尺寸下,容器的 flex-direction 会发生变化,从而实现了 el-dialog 的响应式布局。
阅读全文