第二十九篇:写一个用户管理表格

总算是写好了

<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>