1.如图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b79bdbe0abd94e92464902b7dc48e680.png)
2.代码示例
<template>
<div class="app-container">
<el-card>
<el-form ref="form" :model="form" :rules="rules">
<el-descriptions :column="1" border title="使用单位评价" size="mini" :content-style="CS" :label-style="LS">
<el-descriptions-item>
<template slot="label">
防护
</template>
<el-form-item prop="isAq">
<el-radio-group v-model="form.isAq">
<el-radio v-for="i in sfOptions" :key="i.value" :label="parseInt(i.value)">{{i.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-descriptions-item>
</el-descriptions>
<el-row :gutter="0">
<el-col>
<div style="display: inline-block;margin-left: 10px;margin-top: 5px;">
<el-button size="mini" type="primary" class="el-icon-plus" @click="addInfo">添加</el-button>
</div>
<el-table :data="form.childList" size="mini" border :cell-style="{ padding: '3px' }" highlight-current-row style="width: 100%; ">
<el-table-column label="名称" header-align="center" align="center">
<template slot-scope="scope">
<el-form-item :prop="`childList[${scope.$index}].name`" :rules="{ required: true, message: '必填', trigger: 'blur' }">
<el-input v-model="form.childList[scope.$index].name" placeholder="名称"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="备注" header-align="center" align="center">
<template slot-scope="scope">
<el-form-item :prop="`childList[${scope.$index}].remark`">
<el-input v-model="form.childList[scope.$index].remark" type="textarea" placeholder="备注"/>
</el-form-item>
</template>
</el-table-column>
<el-table-column fixed="right" header-align="center" align="center" label="操作">
<template slot-scope="scope">
<el-button type="text" size="small" icon="el-icon-delete" @click="deleteEvent(scope.row,scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</template>
<script>
import {DICT_TYPE} from "@/utils/dict";
import {MessageBox} from "element-ui";
export default {
name: "CManagement",
components: {},
data() {
return {
CS: {
'width': '15%',
'text-align':'left'
},
LS: {
'width': '10%',
'text-align':'center'
},
form: {
id: undefined,
isAq: undefined,
childList:[],
},
sfOptions:this.getDictDatas(DICT_TYPE.SF),
rules: {}
};
},
created() {},
methods: {
addInfo() {
const obj = {
name: undefined,
remark: undefined,
};
this.form.childList.push(obj);
},
deleteEvent(row, index) {
const _this = this
MessageBox.confirm('删除不能恢复,是否确定删除!', '删除提示', {
confirmButtonText: '删除',
type: 'warning'
}
).then(() => {
_this.form.childList.splice(index, 1);
}).catch(() => {
});
},
}
};
</script>