Vue前端项目-用户管理-增删改（上）

目录

1、按钮界面

2、修改和删除按钮状态控制

3、添加和修改的对话框

4、点击  “新增”方法

5、新增用户的保存操作

6、修改用户

7、删除用户

8、总结

---

实现效果图：

1、按钮界面

在 src / views / system / user / index.vue 页面中，添加 五个按钮分别为 “新增”，“修改”，“删除”，“导入”和 “导出”

在 搜索和重置 按钮后面 添加如下代码：

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" >新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" >修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" >删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" icon="el-icon-upload2" size="mini" >导入</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" icon="el-icon-download" size="mini" >导出</el-button>
          </el-col>
        </el-row>

注意：导入和导出后边单独拿一章出来讲，按钮的权限控制也会单独拿出来讲

2、修改和删除按钮状态控制

修改和删除按钮 是否可用的判定规则如图：

实现：

2.1 在 data 数据中定义 两个变量

  data() {
    return {
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true
    }
  }

2.2 在修改和删除按钮中上一步定义的两个变量

<el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" >修改</el-button>

<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" >删除</el-button>

注意: 绑定变量的代码在步骤1的时候已经做过了,这里只是再提一下

2.3 当表格选项发生变化时, 触发相应的方法

<el-table  :data="userList" @selection-change="handleSelectionChange">

2.4 handleSelectionChange 方法

  methods: { 
   // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    }
  }

3、添加和修改的对话框

对话框代码放置位置：

3.1 对话框代码

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <