第二十九篇:写一个用户管理表格
总算是写好了
<template> <div class="hello" id="HelloWorld"> <label for="username">用户名</label> <el-input size="small" v-model="name" placeholder="请输入内容"></el-input> <label for="username">密码</label> <el-input v-model="password" placeholder="请输入内容"></el-input> <label for="username">电话号码</label> <el-input v-model="call" placeholder="请输入内容"></el-input> <el-row> <el-button @click="addUser">添加用户</el-button> </el-row> <el-table :data="tableData" style="width: 100%" max-height="250"> <el-table-column fixed prop="name" label="姓名" width="150"> </el-table-column> <el-table-column prop="password" label="密码" width="120"> </el-table-column> <el-table-column prop="call" label="联系电话" width="120"> </el-table-column> <el-table-column fixed="right" label="操作" width="120"> <template slot-scope="scope"> <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small"> 移除 </el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { methods: { deleteRow(index, rows) { rows.splice(index, 1); }, addUser: function() { this.tableData.push({ name: this.name, password: this.password, call:this.call }); // 添加完成后,清空数据 this.name = ''; this.password = ''; this.call = ''; }, }, data() { return { name:'', password:'', call:'', tableData: [{ name: 'panghu', password: '123', call: '123123123', },{ name: 'panghu', password: '123', call: '123123123', }, ] } } } </script>
效果图如下
可实现用户的添加删除功能