el-table 新增、编辑和删除

• 用的是 <el-dialog> 里加子弹窗组件标签（自定义） addGoods 的形式，如以下形式

  <el-dialog>
      <addGoods> ...... </addGoods>
  </el-dialog>
  

新增

• 就是给新增按钮加一个事件，事件包括弹窗的打开（给 el-dialog 的 v-model 值赋为 true）、需要传递给弹窗组件的数据信息等（因为是新增，就传想要新增编写的信息的初始化即可）
  • 关于弹窗的详细编码介绍请参考文章：" vue 弹窗组件 "

编辑、删除

• 新增按钮随便在哪个地方都可，但是编辑有要求，最常见的就是放在 </el-table> 里，每一条数据的后面，在 <el-table-column> 为操作的一列，如下代码：

  <el-table-column prop="address" label="操作" width="180" align="center" >
      <template #default="scope">
  <el-button size="small" @click="editorHandleClick(scope.row)" :icon="Edit" >修改</el-button>
  <el-button size="small" @click="deleteGoods(scope.row)" type="danger" :icon="Delete">删除</el-button>
      </template>
  </el-table-column>
  

  • 这里就涉及到了 vue 中的插槽（slot）的内容，<template #default="scope"> 是一个具名插槽，名为 "default"，而其值 scope 是插槽的默认名称，包含的就是当前所在行的所有数据，所以在按钮的点击事件中传递的 scope.row 就是此行的所有数据信息
    • vue 3 中都可以用 # 作为 v-slot 的简写

• 然后编辑事件就是同新增一样，只不过不再是空的待填写的数据了，而是以下的初始化方式

  const editorHandleClick = (row) => { // 这里的row就包含了想要修改的那一行的数据
      // 其他打开弹窗等数据信息
      addGoodsDate.value = {
          goodsName: row.goodsName,
          goodsTree: row.goodsTree,
          // ......
      };
  };
  

• 然后在标签里 :addGoodsDate="addGoodsDate" 就可以在子弹窗组件里获取了

  props: {
    /**
     * 商品信息传参
     */
      addGoodsDate: {
          type: Object,
          default: function() {}
      },
  },
  

  • 表单直接 v-model="addGoodsDate.goodsName" 拿数据即可
  • default: function() {}：对于对象类型的属性，使用函数作为默认值可以确保每个组件实例都有一个独立的对象，而不是多个组件实例共享同一个对象。如果使用对象字面量 {} 作为默认值，多个组件实例可能会共享相同的对象引用，导致一个组件中的状态修改影响其他组件
  • 还有其他类型的默认值，如：
    • default: ""：在某些情况下，若是在未提供操作标识时，默认将 xxx 视为空字符串。这可以防止在组件内部出现 null 或 undefined 的情况，从而使组件更容易处理
    • default: false：type: Boolean
    • default: 0：type: Number
    • default: () => []：type: Array
    • default: () => ({})：Object 除了上面的 function(){} 的另一种写法

• 删除就不用说了，还是 const deleteGoods = (row) => {}，然后方法体里 row.goodsId 进行操作即可

• 除了上述的 <el-dialog> 里加 vue 组件的方式外，还可以直接：

  <el-dialog v-model="dialogFormVisible">
      <el-container>
          <el-main>
              <el-form>
                  <!-- 表单内容...... -->
  

  • 这样就相当于是没有了上面子组件 props 进行数据传递接收，只需要在本 vue 中做所有操作即可，编码思路并无大不同