总结-Vue2增删改查写法

731 阅读1分钟

1.列表

src/views/employees/index.vue

<template>
    <div>
        <!-- 员工列表 -->
        <el-table border :data="list">
          <el-table-column prop="username" label="姓名"/>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="editEmployee(row.id)"
                >编辑</el-button>
              <el-button type="text" size="small" @click="deleteEmployee(row.id)"
                >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
            <el-pagination
            :page-sizes="[2, 5, 10, 20]"
            :page-size="page.size"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper" @current-page="page.page" @current-change="changePage"
            @size-change="changeSize" />
        </el-row>  
    </div>

</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
  data () {
    return {    
        list: [], // 员工列表
        page: { // 分页信息
            page: 1, // 当前页码
            size: 10, // 一页的条数
            total: 0// 总数
        }
     }
  },
  created () {
    // 获取员工列表
    this.getEmpolyeeList()
  },
  methods: {
    // 获取员工数据
    async getEmpolyeeList () {
      const { rows, total } = await getEmpolyeeList(this.page)
      this.page.total = total
      this.list = rows
    },
    // 点击分页功能
    changePage (newPage) {
      this.page.page = newPage
      this.getEmpolyeeList()
    },
   // 切换每页多少条数据   
    changeSize (newSize) {
      this.page.size = newSize
      this.getEmpolyeeList()
    }
  }
}
</script>

2.删除

src/views/employees/index.vue

<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
	methods: {
    	// 删除员工
        async deleteEmployee (id) {
          try {
            // 提示是否删除
            await this.$confirm('确定删除吗')
            // 删除员工
            await deleteEmployee(id)
            // 刷新列表
            this.getEmpolyeeList()
            this.$message.success('删除成功')
          } catch (error) {
            console.log(error)
          }
        }
    }
}
</script>

3.新增&编辑

方式1.不封装组件

src/views/employees/index.vue

<template>
	<div>
        <!-- 新增员工 -->
        <el-row>
          <el-button size="small" type="primary" @click="showDialog = true"
            >新增员工</el-button
          >
        </el-row>        
        <el-dialog :visible="showDialog" :title="formData.id?'编辑员工':'新增员工'" @close="btnCancel">
          <!-- 表单 -->
          <el-form
            ref="addEmployee"
            :model="formData"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item prop="username" label="姓名">
              <el-input
                v-model="formData.username"
                style="width: 80%"
                placeholder="请输入姓名"
              />
            </el-form-item>
          </el-form>
          <el-row type="flex" justify="center">
            <el-col :span="8">
              <el-button size="small" @click="btnCancel">取消</el-button>
              <el-button size="small" type="primary" @click="btnOK">确定</el-button>
            </el-col>
          </el-row>
        </el-dialog>
    </div>
</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
  data () {
      return {
          // 弹出层显示隐藏
          showDialog: false,
          // 添加和编辑表单对象
          formData: {
            username: ''
          },
          // 表单验证规则
          rules: {
            username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
              { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }]
          }
      }
  },
  methods: {
    // 点击编辑
    async editRole (id) {
      // 先获取点击数据
      this.formData = await getEmployeeDetail(id)
      // 在打开显示层
      this.showDialog = true
    },
    // 对话框点击确定
    async btnOK () {
      try {
        // 点击确定验证表单
        await this.$refs.addEmployee.validate()
        if (this.formData.id) {
          // 编辑
          await updateEmployee(this.formData)
        } else {
          // 新增
          await addEmployee(this.formData)
        }
        this.$message.success('操作成功')
        // 刷新列表
        this.getEmpolyeeList()
        // 关闭弹层
        this.showDialog = false
      } catch (error) {
        console.log(error)
      }
    },
    // 对话框点击取消
    btnCancel () {
      // 重置原来的数据-标准写法
      /*
      this.formData = {
        username: ''
      }
      */
      // 重置原来的数据-简化写法写法
      this.formData = this.$options.data().formData
      // 重置校验结果
      this.$refs.addEmployee.resetFields()
      // 关闭弹层
      this.showDialog = false
    }
  }
}
</script>

方式2.封装组件,通过props,$emit,watch消息通信

src/views/employees/index.vue

a.父组件

<template>
	<div>
      <!-- 新增员工 -->
      <el-row>
        <el-button size="small" type="primary" @click="addEmployee()"
          >新增员工</el-button
        >
      </el-row>  
      <!-- 员工列表 -->
      <el-table border :data="list">
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="editEmployee(row.id)"
              >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- 新增/编辑员工对话框 -->
      <add-employees :showDialog.sync="showDialog" :user-id="userId" @success="addEmployeesSuccess"></add-employees>
  </div>
</template>
<script>
export default {
    data(){
        return {
            //控制新增编辑对话框的显示或隐藏
            showDialog: false,
            //当前编辑用户的id
            userId: undefined
        }
    },
    methods: {
        //打开对话框,新增用户
        addEmployee(){
          this.userId = undefined
          this.showDialog = true  
        },
        //打开对话框,编辑用户
        editEmployee(id){
            //保存当前用户的id
        	this.userId = id
            this.showDialog = true
        },
        //添加/编辑成功
        addEmployeesSuccess(){
            // 获取员工列表
            this.showDialog = false
    		this.getEmpolyeeList()
        }
    }
}
</script>

src/views/employees/components/addEmployee.vue

b.子组件

<template>
    <el-dialog :visible="showDialog" :title="formData.id?'编辑员工':'新增员工'" @close="btnCancel">
        <!-- 表单 -->
        <el-form ref="addEmployee"
            :model="formData"
            :rules="rules"
            label-width="120px">
            <el-form-item prop="username" label="姓名">
                <el-input v-model="formData.username"
                    style="width: 80%"
                    placeholder="请输入姓名"/>
            </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
            <el-col :span="8">
                <el-button size="small" @click="btnCancel">取消</el-button>
                <el-button size="small" type="primary" @click="btnOK">确定</el-button>
            </el-col>
        </el-row>
    </el-dialog>
</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
  props: {
      //当前编辑的用户id
      userId: {
          type: Number,
          required: true
      },
      //控制对话框显示的变量
      showDialog: {
          type: Booloean,
          required: true
      }
  },
  watch: {
      userId(id){
          if(id != undefined){
              //获取编辑的详情
              this.formData = await getEmployeeDetail(id)
          }
      }
  },
  data () {
      return {
          // 弹出层显示隐藏
          showDialog: false,
          // 添加和编辑表单对象
          formData: {
            username: ''
          },
          // 表单验证规则
          rules: {
            username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
              { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }]
          }
      }
  },
  methods: {
    // 对话框点击确定
    async btnOK () {
      try {
        // 点击确定验证表单
        await this.$refs.addEmployee.validate()
        if (this.formData.id) {
          // 编辑
          await updateEmployee(this.formData)
        } else {
          // 新增
          await addEmployee(this.formData)
        }
        this.$message.success('操作成功')
        // 刷新列表
        this.$emit('success')
        // 关闭弹层
        this.$emit('update:showDialog', false)
      } catch (error) {
        console.log(error)
      }
    },
    // 对话框点击取消
    btnCancel () {
      // 重置原来的数据-标准写法
      /*
      this.formData = {
        username: ''
      }
      */
      // 重置原来的数据-简化写法写法
      this.formData = this.$options.data().formData
      // 重置校验结果
      this.$refs.addEmployee.resetFields()
      // 关闭弹层
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

方式3.1 封装组件,通过ref,$parent直接通信(推荐)

src/views/employees/index.vue

a.父组件

<template>
	<div>
        <!-- 新增员工 -->
        <el-row>
          <el-button size="small" type="primary" @click="addEmployee()"
            >新增员工</el-button
          >
        </el-row>  
        <!-- 员工列表 -->
        <el-table border :data="list">
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="editEmployee(row.id)"
                >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- 新增/编辑员工对话框 -->
        <add-employees ref="addEmployeeRef" :showDialog.sync="showDialog"></add-employees>
    </div>
</template>
<script>
export default {
    data(){
        return {
            //控制新增编辑对话框的显示或隐藏
            showDialog: false
        }
    },
    methods: {
        //打开对话框,新增用户
        addEmployee(){
          this.showDialog = true  
        },
        //打开对话框,编辑用户
        async editEmployee(id){
          //id-当前编辑用户的
          await this.$ref.addEmployeeRef.getEmployeeDetail(id)
          this.showDialog = true
        }
    }
}
</script>

src/views/employees/components/addEmployee.vue

b.子组件

<template>
    <el-dialog :visible="showDialog" :title="formData.id?'编辑员工':'新增员工'" @close="btnCancel">
        <!-- 表单 -->
        <el-form ref="addEmployee"
            :model="formData"
            :rules="rules"
            label-width="120px">
            <el-form-item prop="username" label="姓名">
                <el-input v-model="formData.username"
                    style="width: 80%"
                    placeholder="请输入姓名"/>
            </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
            <el-col :span="8">
                <el-button size="small" @click="btnCancel">取消</el-button>
                <el-button size="small" type="primary" @click="btnOK">确定</el-button>
            </el-col>
        </el-row>
    </el-dialog>
</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
  props: {
      //控制对话框显示的变量
      showDialog: {
          type: Booloean,
          required: true
      }
  },
  data () {
      return {
          // 弹出层显示隐藏
          showDialog: false,
          // 添加和编辑表单对象
          formData: {
            username: ''
          },
          // 表单验证规则
          rules: {
            username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
              { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }]
          }
      }
  },
  methods: {
    //获取编辑的详情
    async getEmployeeDetail(id){
      if(id != undefined){
        this.formData = await getEmployeeDetail(id)
      }
    },  
    // 对话框点击确定
    async btnOK () {
      try {
        // 点击确定验证表单
        await this.$refs.addEmployee.validate()
        if (this.formData.id) {
          // 编辑
          await updateEmployee(this.formData)
        } else {
          // 新增
          await addEmployee(this.formData)
        }
        this.$message.success('操作成功')
        // 刷新列表
        this.$parent.getEmpolyeeList()
        // 关闭弹层
        this.$emit('update:showDialog', false)
      } catch (error) {
        console.log(error)
      }
    },
    // 对话框点击取消
    btnCancel () {
      // 重置原来的数据-标准写法
      /*
      this.formData = {
        username: ''
      }
      */
      // 重置原来的数据-简化写法写法
      this.formData = this.$options.data().formData
      // 重置校验结果
      this.$refs.addEmployee.resetFields()
      // 关闭弹层
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

方式3.2 封装组件,通过ref,$parent直接通信+通过v-if清空表单(推荐)

src/views/employees/index.vue

a.父组件

<template>
	<div>
        <!-- 新增员工 -->
        <el-row>
          <el-button size="small" type="primary" @click="addEmployee()"
            >新增员工</el-button
          >
        </el-row>  
        <!-- 员工列表 -->
        <el-table border :data="list">
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button type="text" size="small" @click="editEmployee(row.id)"
                >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- 新增/编辑员工对话框 -->
        <add-employees ref="addEmployeeRef" :showDialog.sync="showDialog" v-if="showDialog"></add-employees>
    </div>
</template>
<script>
export default {
    data(){
        return {
            //控制新增编辑对话框的显示或隐藏
            showDialog: false
        }
    },
    methods: {
        //打开对话框,新增用户
        addEmployee(){
          this.showDialog = true  
        },
        //打开对话框,编辑用户
        async editEmployee(id){
          //id-当前编辑用户的
          this.showDialog = true
          //在对话框显示完成后让组件获取数据
          this.$nextTick(()=>{
          	await this.$ref.addEmployeeRef.getEmployeeDetail(id)
          })
        }
    }
}
</script>

src/views/employees/components/addEmployee.vue

b.子组件

<template>
    <el-dialog :visible="showDialog" :title="formData.id?'编辑员工':'新增员工'" @close="btnCancel">
        <!-- 表单 -->
        <el-form ref="addEmployee"
            :model="formData"
            :rules="rules"
            label-width="120px">
            <el-form-item prop="username" label="姓名">
                <el-input v-model="formData.username"
                    style="width: 80%"
                    placeholder="请输入姓名"/>
            </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
            <el-col :span="8">
                <el-button size="small" @click="btnCancel">取消</el-button>
                <el-button size="small" type="primary" @click="btnOK">确定</el-button>
            </el-col>
        </el-row>
    </el-dialog>
</template>
<script>
import { addEmployee, getEmpolyeeList, getEmployeeDetail, updateEmployee, deleteEmployee } from '@/api/employess'
export default {
  props: {
      //控制对话框显示的变量
      showDialog: {
          type: Booloean,
          required: true
      }
  },
  data () {
      return {
          // 弹出层显示隐藏
          showDialog: false,
          // 添加和编辑表单对象
          formData: {
            username: ''
          },
          // 表单验证规则
          rules: {
            username: [{ required: true, message: '用户名不能为空', trigger: 'blur' },
              { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }]
          }
      }
  },
  methods: {
    //获取编辑的详情
    async getEmployeeDetail(id){
      if(id != undefined){
        this.formData = await getEmployeeDetail(id)
      }
    },  
    // 对话框点击确定
    async btnOK () {
      try {
        // 点击确定验证表单
        await this.$refs.addEmployee.validate()
        if (this.formData.id) {
          // 编辑
          await updateEmployee(this.formData)
        } else {
          // 新增
          await addEmployee(this.formData)
        }
        this.$message.success('操作成功')
        // 刷新列表
        this.$parent.getEmpolyeeList()
        // 关闭弹层
        this.$emit('update:showDialog', false)
      } catch (error) {
        console.log(error)
      }
    },
    // 对话框点击取消
    btnCancel () {
      //不需要手动重置表单应该v-if会自动消耗组件
      // 关闭弹层
      this.$emit('update:showDialog', false)
    }
  }
}
</script>