Vue中常用表格（增删改查）

<template>
 <div>
  <el-button style="float:left;margin-left:20px;" type="primary" @click="add_dialogVisible = true"
   >新增用户</el-button
  >
  <el-table
   :data="getSearchInfo.slice((currpage - 1) * pageSize, currpage * pageSize)"
   style=" 100%"
  >
   <template v-for="(item, index) in user_data_title">
    <el-table-column :prop="item.prop" :label="item.label" align="center" :key="index">
    </el-table-column>
   </template>
   <el-table-column align="center">
    <template slot="header" slot-scope="scope">
     <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
    </template>
    <template slot-scope="scope">
     <el-button size="mini" plain type="primary" @click="handleEdit(scope.row)">编辑</el-button>
     <el-button size="mini" plain type="danger" @click="handleDelete(scope.row)">删除</el-button>
     <el-button size="mini" plain type="warning" @click="handleChagePwd(scope.row)"
      >修改密码</el-button
     >
    </template>
   </el-table-column>
  </el-table>
  <el-pagination
   background
   :page-size="pageSize"
   :page-sizes="[10, 20, 50]"
   :current-page.sync="currentPage"
   :total="getSearchInfo.length"
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   layout="sizes, total, prev, pager, next, jumper"
  >
  </el-pagination>
  <!-- 新增用户 -->
  <div class="add_dialog">
   <el-dialog
    title="新增用户"
    :visible.sync="add_dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    width="500px"
   >
    <el-form>
     <el-form-item label="用户名:">
      <el-input
       v-model.trim="add.user_name"
       placeholder="请输入用户名"
       autocomplete="off"
      ></el-input>
     </el-form-item>
     <el-form-item label="密码:">
      <el-input v-model.trim="add.password" placeholder="请输入密码" autocomplete="off"></el-input>
     </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
     <el-button @click="cancel('add')">取 消</el-button>
     <el-button type="primary" @click="add_determine">确 定</el-button>
    </span>
   </el-dialog>
  </div>
  <!-- 编辑用户 -->
  <div class="edit_dialog">
   <el-dialog
    title="编辑用户"
    :visible.sync="edit_dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    width="500px"
   >
    <el-form>
     <el-form-item label="用户名:">
      <el-input
       v-model.trim="edit.user_name"
       placeholder="请输入用户名"
       autocomplete="off"
      ></el-input>
     </el-form-item>
     <el-form-item label="密码:">
      <el-input v-model.trim="edit.password" placeholder="请输入密码" autocomplete="off"></el-input>
     </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
     <el-button @click="cancel('edit')">取 消</el-button>
     <el-button type="primary" @click="edit_determine">确 定</el-button>
    </span>
   </el-dialog>
  </div>
  <!-- 修改密码弹窗 -->
  <div class="changePwd_dialog">
   <el-dialog
    :title="changeName"
    :visible.sync="changePwd_dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    width="500px"
   >
    <div>
     <span :style="inlineStyle">修改密码:</span>
     <el-input
      :style="inlineStyle"
      v-model.trim="change.new_pwd"
      placeholder="请输入新密码"
     ></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
     <el-button @click="cancel('changePwd')">取 消</el-button>
     <el-button type="primary" @click="changePwd_determine">确 定</el-button>
    </span>
   </el-dialog>
  </div>
 </div>
</template>

<script>
export default {
 name: 'UserManagement',
 inject: ['reload'],
 data() {
  return {
   add_dialogVisible: false,
   edit_dialogVisible: false,
   changePwd_dialogVisible: false,
   user_data: [],
   user_data_title: [
    {
     prop: 'name',
     label: '用户名',
    },
    {
     prop: 'password',
     label: '密码',
    },
    {
     prop: 'createTime',
     label: '创建时间',
    },
   ],
   search: '',
   currpage: 1,
   pageSize: 10,
   currentPage: null,
   add: {
    // 新增用户
    user_name: '',
    password: '',
   },
   edit: {
    // 编辑用户
    user_name: '',
    password: '',
   },
   changeName: '',
   change: {
    // 修改密码
    new_pwd: '',
   },
   inlineStyle: {
    // span和input在同一行
    display: 'inline',
   },
  }
 },
 computed: {
  getSearchInfo() {
   //   搜索
   let search = this.search
   if (search) {
    this.currpage = 1
    this.currentPage = 1
    return this.user_data.filter(data => {
     return Object.keys(data).some(key => {
      return (
       String(data[key])
        .toLowerCase()
        .indexOf(search) > -1
      )
     })
    })
   }
   return this.user_data
  },
 },
 methods: {
  get_user_data() {
   this.user_data = []
   let data = this.$mockjs.mock({
    'user_data|20': [
     {
      user_id: '@natural',
      name: '@cname',
      password: '@word',
      createTime: '@datetime',
     },
    ],
   })
   this.user_data = data.user_data
  },
  handleEdit(row) {
   // 编辑
   console.log(row)
   this.edit.user_name = row.name
   this.edit.password = row.password
   this.edit_dialogVisible = true
  },
  edit_determine() {
   // 提交编辑信息
   console.log(this.edit)
  },
  handleDelete(row) {
   // 删除
   this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
   })
    .then(() => {
     this.$message({
      type: 'success',
      message: '删除成功!',
     })
    })
    .catch(() => {
     return false
    })
  },
  handleChagePwd(row) {
   // 修改密码
   console.log(row)
   this.changeName = row.name
   this.changePwd_dialogVisible = true
  },
  changePwd_determine() {
   // 提交新密码
   console.log(this.change)
  },
  handleCurrentChange(cpage) {
   // 点击页数
   this.currpage = cpage
  },
  handleSizeChange(val) {
   this.pageSize = val
  },
  add_determine() {
   // 提交新用户信息
   console.log(this.add)
  },
  cancel(data) {
   // 取消
   switch (data) {
    case 'add':
     this.add = {}
     this.add_dialogVisible = false
     break
    case 'changePwd':
     this.change = {}
     this.changePwd_dialogVisible = false
     break
    default:
     this.edit = {}
     this.edit_dialogVisible = false
     break
   }
  },
 },
 mounted() {
  this.get_user_data()
 },
}
</script>

<style scoped>
.edit_dialog /deep/ .el-dialog,
.add_dialog /deep/ .el-dialog,
.changePwd_dialog /deep/ .el-dialog {
 border-radius: 15px;
}
.changePwd_dialog /deep/ .el-input__inner {
  300px;
}
</style>