<template>
<div class="box">
<el-form
label-position="right"
:rules="rules"
:model="ruleForm"
ref="ruleForm"
>
<el-table
:data="ruleForm.evidenceTemplateList"
border
highlight-current-row
>
<el-table-column
type="index"
label="序号"
align="center"
width="70"
></el-table-column>
<el-table-column label="证据名称" align="center">
<template slot-scope="scope">
<el-form-item
:prop="'evidenceTemplateList.' + scope.$index + '.name'"
:rules="rules.name"
>
<template v-if="scope.row.editor == 'view'">
<div>
{{ scope.row.name }}
</div>
</template>
<template v-else>
<el-input v-model="scope.row.name" :maxlength="50"></el-input>
</template>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template
slot-scope="scope"
v-if="scope.$index == ruleForm.evidenceTemplateList.length - 1"
>
<el-button size="mini" @click="add">添加</el-button>
<el-button
type="danger"
size="mini"
@click="del(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>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
evidenceTemplateList: [],
},
rules: {
name: [
{ required: true, message: "证据模板名称不能为空", trigger: "blur" },
],
},
};
},
components: {},
mounted() {
this.ruleForm.evidenceTemplateList = [{ name: "111", editor: "view" }];
},
methods: {
del(row, index) {
this.ruleForm.evidenceTemplateList =
this.ruleForm.evidenceTemplateList.filter((item, i) => index != i);
},
add() {
this.ruleForm.evidenceTemplateList.push({ name: null, editor: "eidtor" });
console.log(this.ruleForm.evidenceTemplateList);
},
saveData() {
this.$nextTick(() => {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
console.log(this.ruleForm.evidenceTemplateList);
} else {
return false;
}
});
});
},
},
};
</script>
<style lang="scss" scoped>
.box {
margin: 0 190px;
}
.dialog-footer {
margin-top: 10px;
text-align: right;
}
</style>
03-25
2614