526互联

el-table 新增、编辑和删除

发布时间 2023-12-05 23:14:31作者: 朱呀朱~

新增

  • 就是给新增按钮加一个事件，事件包括弹窗的打开（给 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 进行操作即可