**基于面试官老师的需求，使用 vue 加 element 实现了一个简单的数据增减表格，思路如
下：**
具体的效果如下：
点击添加进行表格一行的动态添加，点击按钮弹出Modal框进行输入，将输入的信息放在对应行的输入框中，点击删除进行一行的删除
首先观察题目，确定需求，发现需求为一个简单的 demo 页面，我们可以将按钮与中间
一部分分别作为组件进行开发，将按钮组件作为父组件，中间的 list 组件作为子组件，书写
的页面如下：
首先是按钮组件，命名为 addButton.vue
<template>
<!-- 父组件 -->
<div class="addButton">
<el-row>
<el-button type="success" @click="addInput" size="mini" >点击添加 item</el-button>
</el-row>
<list :todos='todolist'></list>
</div>
</template>
<script>
import list from './list.vue'
export default {
name: 'addButton',
data() {
return {
todolist: [],
sum:1
}
},
methods: {
addInput() {
// 将数据进行动态的添加
this.todolist.push({inputText:'',btnname:`按钮${this.sum}`,delbtn:true})
this.sum++;
}
},
components:{
list
}
}
</script>
<style>
</style>
然后是中间的 list 组件，命名为 list.vue
<template>
<div class="list">
<el-table :data="todos" style="width: 600px"><!-- 表格的第一列 -->
<el-table-column label="输入框" width="280">
<template slot-scope="scope">
<el-input v-model="scope.row.inputText" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<!-- 表格的第二列 -->
<el-table-column label="姓名" width="120">
<template slot-scope="scope">
<button @click="open(scope.row)">{{ scope.row.btnname }}</button>
</template>
</el-table-column>
<!-- 表格的第三列 -->
<el-table-column label="操作">
<template slot-scope="scope">
<el-popconfirm confirm-button-text='确定' cancel-button-text='我再想一想'
icon="el-icon-info"
icon-color="red" title="这是一行确定删除吗？"
@confirm="handleDelete(scope.$index, todos)">
<el-button size="mini" type="danger" slot="reference">删除
</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'list',
data() {
return {
}
},
props: ['todos'],
methods: {
//点击确认就调用删除函数
handleDelete(index, todo) {
console.log(index, todo);
todo.splice(index, 1);
},
// 点击按钮输入
open(row) {this.$prompt('请输入内容', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消'
}).then(({ value }) => {
row.inputText = value,
this.$message({
type: 'success',
message: '添加成功'
});
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
}
}
}
</script>
<style>
</style>
最后在 APP.vue 中将组件 addButton.vue 进行挂载运行即可
