lovecoding
/
VIP23


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<h1>动态表格Vue版</h1>
<div id="app">
    <table border="1" width="600px" cellpadding="10" cellspacing="0">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        <tr v-for="(e,i) in employees" >
            <td>{{e.id}}</td>
            <td width="120px" >{{e.name}}</td>
            <td>{{e.age}}</td>
            <td>{{e.major}}</td>
            <td>
                <input type="button" value="删除"  @click="delEmp(i)" />
                <input type="button" value="修改"  @click="updateEmp(i)" />
            </td>
        </tr>
    </table>

    <hr>

    <!-- v-model 双向绑定  -->
    序号：<input type="text"  v-model="emp.id"  /><br/>
    姓名：<input type="text"  v-model="emp.name" /><br/>
    年龄：<input type="text"  v-model="emp.age"  /><br/>
    专业：<input type="text"  v-model="emp.major"  /><br/>

    <input  type="button" value="添加员工" @click="addEmp" />
    <input type="button" value="修改保存" @click="updateEmpSave" />

</div>
</body>
<script>
    var vue = new Vue({

        el:"#app",
        data:{
            employees:[
                {id:"1",name:"张三丰",age:20,major:"计算机"},
                {id:"2",name:"张翠山",age:18,major:"软件"},
                {id:"3",name:"张无忌",age:22,major:"数学"},
                {id:"4",name:"张3",age:28,major:"工程"},
                {id:"5",name:"张4",age:23,major:"土木"}
            ],
            emp:{
                id:"1",
                name:"赵敏",
                age:18,
                major:"生物制药"
            }
        },
        methods:{
            addEmp(){
                //获取input 中的数据
                //console.log(this.emp)
                this.employees.push(this.emp)
            },
            delEmp(index){
                /*
                splice
                    三个参数，
                        第一个参数 索引
                        第二个参数 删除的数量 从索引开始
                        第三个参数 添加 的元素
                 */
                console.log(index)
                this.employees.splice(index,1)

                /*
                    思考：实现修改？
                 */
            },
            updateEmp: function (index) {
                let emp = this.employees[index];
                this.emp = {...emp};
            },
            updateEmpSave(index){
                this.employees.splice(index,1,this.emp)
            }
        }
    })
</script>
</html>