一、用户管理

1. 界面

<template>
  <!-- 用户管理 -->
  <div>
    <el-row class="topRow">
      <el-button type="primary" @click="addUser">添加用户</el-button>
      <el-button type="success" @click="batchDel">批量删除</el-button>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="userData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- 复选接钮 -->
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="编号" prop="id" width="120"></el-table-column>
      <el-table-column prop="username" label="用户" width="120"></el-table-column>
      <el-table-column prop="createTime" label="创建日期" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="编号">
          <el-input v-model="form.id"></el-input>
        </el-form-item>
        <el-form-item label="用户">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: { id: "", username: "", createTime: "" },
      userData: [
        { id: 1, username: "王小虎", createTime: "2019-08-13 15:00:00" },
        { id: 2, username: "李小七", createTime: "2019-08-13 15:00:00" },
        { id: 3, username: "张小八", createTime: "2019-08-13 15:00:00" }
      ],
      multipleSelection: [],
      title: "",
      dialogVisible: false
    };
  },
  methods: {
    // 选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose() {
    this.dialogVisible = false;
   },
  }
};
</script>
<style scoped>
.topRow {
  margin-bottom: 10px;
  float: left;
}
</style>

2. 删除事件

    // 删除
    handleDelete(index, rows) {
      this.userData.splice(index, 1);
    },
    batchDel() {
      this.multipleSelection.forEach(element => {
        this.userData.forEach((item, index) => {
          if (item.username == element.username) {
            this.userData.splice(index, 1);
          }
        });
      });
    },

3. 添加编辑事件

    addUser() {
      this.form.id = "";
      this.form.username = "";
      this.title = "添加用户";
      this.dialogVisible = true;
    },
    // 编辑
    handleEdit(index, rows) {
      this.title = "编辑用户";
      this.dialogVisible = true;
      this.form.id = rows.id;
      this.form.username = rows.username;
      console.log(index + "->" + rows.username);
    },

4. 保存事件

    save() {
      if (this.title == "添加用户") {
         let user = { id: "", username: "", createTime: "" };
        user.id = this.form.id;
        user.username = this.form.username;
        user.createTime= "2019-08-14 10:00:00";
        this.userData.push(user);
        this.dialogVisible = false;
      } else if (this.title == "编辑用户") {
         this.userData.forEach((item,index)=>{
           if(item.username==this.form.username){
             item.username=this.form.username;
              this.dialogVisible = false;
              return;
           }
         });
      }
    },

界面

添加对话框