使用vue.js、element-ui開發前段的過程中,業務需求,需要實現el-table可動態添加、修改、刪除數據。同時保存數據時需要使用 el-form自帶的校驗功能校驗數據的正確性。如下圖:
頁面代碼部分:這裏需要注意 el-form-item 中:prop的命名方式。這種命名方式是element-ui定義的,需要按照規則編寫。
<el-form-item :prop="'evidenceTemplateList.' + scope.$index + '.name'" :rules='rules.name'>
<el-form label-position="right" status-icon :rules="rules" :model="ruleForm" ref="ruleForm">
<el-table :data="ruleForm.evidenceTemplateList" border fit highlight-current-row>
<el-table-column type="index" label="序號" align="center" width="70"></el-table-column>
<el-table-column label="證據名稱" align="center" style="margin-left: 0px !important;">
<template slot-scope="scope">
<el-form-item :prop="'evidenceTemplateList.' + scope.$index + '.name'" :rules='rules.name'>
<el-input v-if="scope.$index < ruleForm.evidenceTemplateList.length-1" v-model="scope.row.name" :maxlength=50></el-input>
<el-input v-if="scope.$index == ruleForm.evidenceTemplateList.length-1" v-model="scope.row.name" :maxlength=50 @change="evidChangeLast(scope.row.name)"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button v-if="scope.$index < ruleForm.evidenceTemplateList.length-1" type="danger" size="mini" @click="delEvid(scope.row,scope.$index)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="mini" @click="saveData()">保存</el-button>
<el-button size="mini" @click="closeDialog()">取消</el-button>
</div>
js代碼部分:
<script>
export default {
components: {},
data() {
return {
evidenceTemplateGroup: {
id: '',
name: '',
nickname: '',
userId: '',
evidenceTemplateList: []
},
ruleForm: {},
evidenceTemp: {
id: '',
name: '',
remarks: ''
},
evidenceTemplateDeleteList: '',
rules: {
name: [
{ required: true, message: '證據模板名稱不能爲空', trigger: 'blur' }
]
}
};
},
created() {
this.getList();
},
methods: {
saveData() {
//刪除最後一行
let index = this.ruleForm.evidenceTemplateList.length - 1;
this.ruleForm.evidenceTemplateList.splice(index, 1);
this.$nextTick(() => {
this.$refs['ruleForm'].validate(valid => {
if (valid) {
this.loading = true;
//根據狀態dialogStatus判斷是新增還是更新
if (this.dialogStatus == 'create') {
this.createTemp();
} else {
this.updateTemp();
}
} else {
this.ruleForm.evidenceTemplateList.push(
JSON.parse(JSON.stringify(this.evidenceTemp))
);
return false;
}
});
});
}
}
};
</script>