vue+el-dialog提交校驗
阿新 • • 發佈：2021-12-06
<template>
<div style="margin:10px;">
<el-card>
<el-table ref="multipleTable" :data="tableData" border style="width:100%;">
<el-table-column type="index" label="序號" width="200px" align="center"> </el-table-column>
<el-table-column prop="ticket_name" label="票據" align="center"></el-table-column>
<el-table-column prop="price" label="價格" align="center"></el-table-column>
<el-table-column label="操作" align="center" >
<template>
<span class="nameInfo" @click="editTicketPrice">修改</span>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- 修改彈框 -->
<el-dialog title="價格修改" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false">
<el-form :model="priceForm" :rules="rules" ref="priceForm" label-width="90px" class="demo-ruleForm">
<el-form-item label="價格" prop="price">
<el-input type="text" v-model="priceForm.price" style="width:250px;"></el-input>
</el-form-item>
<el-form-item>
<el-button style="float:right;" type="primary" @click="submitForm('priceForm')">確定</el-button>
<el-button style="float:right;margin-right:20px;" @click="cancelForm">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import { queryTicketList,updatePrice } from '@/api/deposit.js' //引入後端介面方法
export default {
data() {
return {
tableData:[],
priceForm:{
price:''
},
dialogFormVisible:false,
rules: {
price: [
{ required: true, message: '請輸入價格', trigger: 'blur' },
]
},
}
},
created () {
this.getTicketList();
},
methods: {
getTicketList() {
queryTicketList().then(res=>{
this.tableData = res.data
})
},
editTicketPrice(){
this.dialogFormVisible = true
},
// 修改
submitForm() {
let params={
price:this.priceForm.price
}
this.$refs['priceForm'].validate((valid) => {
if (valid) {
updatePrice(params).then(res=>{
this.$message.success('儲存成功')
this.dialogFormVisible = false
this.getTicketList()
})
} else {
console.log('error submit!!');
return false;
}
});
},
cancelForm(){
this.dialogFormVisible = false
this.$refs['priceForm'].resetFields();
}
},
};
</script>
<style scoped> </style>
<style scoped> </style>