P18-Vue3后台管理系统-用户管理界面-表格编辑和删除操作_vue3表格中某一项数据的删除按钮的接口

P18-Vue3后台管理系统-用户管理界面-表格编辑和删除操作

1.概述

这篇文章介绍用户管理界面表格的编辑和删除操作。

2.编辑操作实现

2.1.CommonTable向父组件发送操作事件

2.2.UserManage父组件接收子组件事件

2.3.父组件输出操作表格的行数据

3.封装弹出框组件

当在表格上点击编辑后，需要弹出一个form表单的弹出框来修改数据。下面封装这个弹出框组件实现编辑功能。

3.1.查看Element官网提供弹框组件

3.2.创建dialog弹窗

• 在UserManage组件创建dialog弹窗结构。
  
• 在弹窗中添加form表单
  
• form表单操作数据

// 编辑表格内容的form表单数据
      operateForm: {
        // 更新表格字段名字
        name: '',
        addr: '',
        age: '',
        birth: '',
        sex: ''
      },
      operateFormLabel: [
        {
          model: 'name',
          label: '姓名'
        },
        {
          model: 'age',
          label: '年龄'
        },
        {
          model: 'sex',
          label: '性别',
          type: 'select',
          opts: [
            {
              label: '男',
              value: 1
            },
            {
              label: '女',
              value: 0
            }
          ]
        },
        {
          model: 'birth',
          label: '出生日期',
          type: 'date'
        },
        {
          model: 'addr',
          label: '地址'
        }
      ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

3.3.CommonForm表单组件添加日期选择器

在上面编辑表单中operateFormLabel数据对象model为birth设置的类型是date类型，所以我们要在CommonForm表单组件中添加一个日期选择器支持他的编辑日期时候可以通过时间选择器选择时间。

• 使用Element提供的默认的日期选择组件
  
• CommonForm组件添加日期选择控件
  

3.4.设置表单弹窗显示时机

设置弹窗表单在点击表格编辑时候显示，其他情况不显示

• 添加弹窗是否显示属性
  
• 设置编辑时候显示弹窗表单
  
• 设置CommonForm组件显示Label
  

3.5.表单弹窗效果

3.6.表单弹窗添加操作按钮

Element官网提供的Dialog对话框控件，操作按钮使用是插槽形式，我们只要复用这个插槽即可。

• 应用到UserManage组件
  

3.8.弹窗操作按钮绑定事件

• 绑定取消事件
  
• 绑定确定事件
  
• 查看确定事件输出内容
  
• 完善确定事件
  

3.9.表单弹窗操作按钮效果

3.10.表格删除操作事件

• CommonTable子组件向父组件发送删除事件
  
• UserManage父组件输出删除事件数据
  
• 控制台输出了删除表格事件数据
  
• 添加删除提示弹框
  
• 调用删除接口完成删除操作
  

3.11.表格删除用户效果

4.表格编辑和删除完整代码

4.1.UserManage组件完整代码

<template>
  <div class="manage">
    <!-- 
      编辑表格的弹窗
      - :title：弹窗名称根据传入的类型显示不同的名称
    -->
    <el-dialog :title="operateType === 'add' ? '新增用户' : '更新用户'" :visible.sync="isShow">
      <!-- 将封装好的form表单添加到弹窗中 -->
      <common-form :formLabel="operateFormLabel" :form="operateForm"></common-form>
      <!-- 弹窗添加操作按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary">+ 新建</el-button>
      <common-form inline :formLabel="formLabel" :form="searchForm">
        <el-button type="primary">搜索</el-button>
      </common-form>
    </div>
    <!-- 
      Table表格组件
        - :tableData="tableData"：给子组件CommonTable传递表格数据
        - :tableLabel="tableLabel"：给子组件CommonTable传递表格列名结构
        - @changePage：接收CommonTable子组件发送的changePage事件，获取当前用户点击的页数
        - @edit="editUser":接收CommonTable子组件发送的编辑表格事件
     -->
    <common-table :tableData="tableData" :tableLabel="tableLabel" :config="config" @changePage="getList()" @edit="editUser" @del="delUser"></common-table>
  </div>
</template>

<script>
// 导入子组件
import CommonForm from '../../components/CommonForm'
import CommonTable from '../../components/CommonTable'
export default {
  components: {
    // 注册子组件
    CommonForm,
    CommonTable
  },
  data() {
    return {
      // 设置弹窗表单操作类型默认是新增表格，当点击编辑时候修改操作类型
      operateType: 'add',
      // 设置弹窗表单默认不显示
      isShow: false,
      // table表格数据
      tableData: [],
      // 表格列名
      tableLabel: [
        {
          // prop属性来对应对象中的键名即可填入数据
          prop: 'name',
          // 表格列名称
          label: '姓名'
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'sexLabel',
          label: '性别'
        },
        {
          prop: 'birth',
          label: '出生日期',
          width: 200
        },
        {
          prop: 'addr',
          label: '地址',
          width: 520
        }
      ],
      // 表格配置信息
      config: {
        page: 1,
        total: 30,
        loading: false
      },
      // 编辑表格内容的form表单数据
      operateForm: {
        // 更新表格字段名字
        name: '',
        addr: '',
        age: '',
        birth: '',
        sex: ''
      },
      operateFormLabel: [
        {
          model: 'name',
          label: '姓名'
        },
        {
          model: 'age',
          label: '年龄'
        },
        {
          model: 'sex',
          label: '性别',
          type: 'select',
          opts: [
            {
              label: '男',
              value: 1
            },
            {
              label: '女',
              value: 0
            }
          ]
        },
        {
          model: 'birth',
          label: '出生日期',
          type: 'date'
        },
        {
          model: 'addr',
          label: '地址'
        }
      ],
      // form表单数据
      searchForm: {
        keyword: ''
      },
      formLabel: [
        {
          model: 'keyword',
          label: ''
        }
      ]
    }
  },
  methods: {
    // 请求table表格数据
    getList() {
      this.config.loading = true
      this.$http
        .get('/api/user/getUser', {
          params: {
            page: this.config.page
          }
        })
        .then(res => {
          // 请求接口返回的数据赋值给tableData
          this.tableData = res.data.list.map(item => {
            item.sexLabel = item.sex === 0 ? '女' : '男'
            return item
          })
          this.config.total = res.data.count
          this.config.loading = false
        })
    },
    // 编辑table表格方法
    editUser(row) {
      // 设置表单弹窗类型为编辑
      this.operateType = 'edit'
      // 编辑时候显示表单弹窗
      this.isShow = true
      // 将子组件表格内容传入父组件表单
      this.operateForm = row
      // 父组件输出子组件发送编辑表格事件的行数据
      console.log(row)
    },
    delUser(row) {
      // 插入MessageBox弹框控件
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 1.请求删除接口，将id作为参数传给接口。删除数据
          let id = row.id
          this.$http
            .get('/api/user/del', {
              params: {
                id
              }
            })
            // 2.处理删除接口返回的数据
            .then(res => {
              console.log(res.data)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 3.删除接口请求完成后，刷新表格数据
              this.getList()
            })
        })

        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      // 输出子组件发送的删除表格数据事件
      console.log(row)
    },
    // 提交编辑table表格方法
    confirm() {
      // 根据当前的操作类型判断调用的接口，如果是edit调用编辑接口，add调用新增接口
      if (this.operateType === 'edit') {
        // 发送post请求，this.operateForm是请求的参数。
        this.$http.post('/api/user/edit', this.operateForm).then(res => {
          // 输出编辑接口返回数据
          console.log(res.data)
          // 点击确定后关闭表单弹窗
          this.isShow = false
          // 刷新table表格获取新的数据
          this.getList()
        })
      }
    }
    // 打印子组件传递当前的页数
    /* 
    changePage(val) {
      console.log(val)
    }
     */
  },
  // 调用请求表格数据方法
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/userManage';
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239

4.2.CommonTable组件完整代码

<template>
  <div class="common-table">
    <!-- 
      将表格数据tableData赋值给data 
        -stripe：斑马纹显示表格
        -v-loading：显示loading加载过程,值有父组件data数据config对象传递，决定是否显示加载效果
    -->
    <el-table :data="tableData" height="90%" stripe v-loading="config.loading">
      <!-- 表格第一列序号 -->
      <el-table-column label="序号" width="85">
        <template slot-scope="scope">
          <!-- 
            设置序号
              -  (config.page - 1) * 20 ：获取当前页数，每页20条
              - scope.$index + 1：设置序号
          -->
          <span style="margin-left: 10px">{{ (config.page - 1) * 20 + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 
        表格序号后面的列通过遍历父组件传入的data数据动态改变
          - show-overflow-tooltip:超出一行的内容点点点显示
          - :width:动态设置列宽，如果父组件传递了某个列的宽度则使用父组件传递的宽度，如果某个列没有传递宽度，则使用默认宽度
          
       -->
      <el-table-column v-for="item in tableLabel" :key="item.prop" :label="item.label" show-overflow-tooltip :width="item.width ? item.width : 125">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <!-- Table表格操作列 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 
      设置分页
        - :total="config.total":设置总页数
        - :current-page.sync="config.page"：设置当前页数
        - @current-change：绑定当前页事件，获取用户选择的页数
    -->
    <el-pagination class="pager" layout="prev, pager, next" :total="config.total" :current-page.sync="config.page" @current-change="changePage">
    </el-pagination>
  </div>
</template>

<script>
export default {
  // 接收父组件传来的数据
  props: {
    tableData: Array,
    tableLabel: Array,
    config: Object
  },
  methods: {
    // ---表格操作列方法---
    // 向父组件传入编辑事件
    handleEdit(row) {
      this.$emit('edit', row)
    },
    // 向父组件传递删除事件
    handleDelete(row) {
      this.$emit('del', row)
    },
    // ---分页操作方法：当改变当前页数时，向父组件发送当前页数
    changePage(page) {
      this.$emit('changePage', page)
    }
  }
}
</script>

<style lang="scss" scoped>
.common-table {
  // 设置表格高度，减去页面header高度
  height: calc(100% - 62px);
  // 设置表格背景色
  background-color: #fff;
  // 设置相对定位
  position: relative;
  // 设置分页样式
  .pager {
    position: absolute;
    bottom: 0;
    right: 20px;
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92