vue element-ui 表格动态添加行编辑行删除行
vue element-ui 表格动态添加行编辑行删除行代码展示<template><div class="app-container home"><el-form ref="historyForm" :model="historyForm" size="small"><el-table:data="historyForm.tableData"style=
·
vue element-ui 表格动态添加行编辑行删除行
代码展示
<template>
<div class="app-container home">
<el-form ref="historyForm" :model="historyForm" size="small">
<el-table
:data="historyForm.tableData"
style="width: 100%"
class="list-table"
size="mini"
border>
<el-table-column label="疾病名称" align="center" prop="diseaseName">
<template slot-scope="scope">
<el-input v-model="scope.row.diseaseName"></el-input>
</template>
</el-table-column>
<el-table-column label="用药情况">
<el-table-column label="药物名称" align="center" prop="drugName">
<template slot-scope="scope">
<el-input v-model="scope.row.drugName"></el-input>
</template>
</el-table-column>
<el-table-column label="剂量" align="center" prop="dose">
<template slot-scope="scope">
<el-input v-model="scope.row.dose"></el-input>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="addParamsSetting">新增</el-button>
<el-button type="primary" size="small" @click.native.prevent="deleteRow(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button @click="submitFun">提交</el-button>
</el-form>
</div>
</template>
<script>
export default {
name: "Index",
data() {
return {
historyForm: {
tableData: [{
diseaseName: '',
drugName: '',
dose: '',
}]
},
};
},
created() {
},
methods: {
addList () {
this.historyForm.tableData.push({
diseaseName: '',
drugName: '',
dose: '',
})
},
// 新增行
addParamsSetting () {
this.addList()
},
// 删除当前行
deleteRow (index) {
this.historyForm.tableData.splice(index, 1)
},
submitFun() {
console.log(this.historyForm)
},
}
};
</script>
效果展示
更多推荐
已为社区贡献2条内容
所有评论(0)