vue+el-dialog提交校验

<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>