<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
? ? ? ? ? ? <el-table ?:data="ruleForm.tableList" style="width: 100%">
? ? ? ? ? ? ? ? <el-table-column prop="name" align="center">
? ? ? ? ? ? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? ? ? ? ? ? ? <el-form-item label="活動名稱" :prop="'tableList.'+scope.$index+'.name'" :rules='rules.name'>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <el-input v-model="scope.row.name"></el-input>
? ? ? ? ? ? ? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? ? ? <el-table-column align="center">
? ? ? ? ? ? ? ? ? ? <template>
? ? ? ? ? ? ? ? ? ? ? ? ?<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
? ? ? ? ? ? ? ? ? ? ? ? ?<el-button @click="resetForm('ruleForm')">重置</el-button>
? ? ? ? ? ? ? ? ? ? </template>
? ? ? ? ? ? ? ? </el-table-column>
? ? ? ? ? ? </el-table>
? ? ? </el-form>
export default {
? ? data() {
? ? ? return {
? ? ? ? ruleForm: {
? ? ? ? ? tableList: [],
? ? ? ? },
? ? ? ? rules: {
? ? ? ? ? name: [
? ? ? ? ? ? { required: true, message: '請輸入活動名稱', trigger: 'blur' },
? ? ? ? ? ? { min: 3, max: 5, message: '長度在 3 到 5 個(gè)字符', trigger: 'blur' }
? ? ? ? ? ],
? ? ? ? }
? ? ? };
? ? },
? ? methods: {
? ? ? submitForm(formName) {
? ? ? ? this.$refs[formName].validate((valid) => {
? ? ? ? ? if (valid) {
? ? ? ? ? ? alert('submit!');
? ? ? ? ? } else {
? ? ? ? ? ? console.log('error submit!!');
? ? ? ? ? ? return false;
? ? ? ? ? }
? ? ? ? });
? ? ? },
? ? ? resetForm(formName) {
? ? ? ? this.$refs[formName].resetFields();
? ? ? }
? ? }
}