vue + Element动态表格增加删除

先看结果

代码如下：

<template>
  <div>
    <el-dialog
      title="设备材料"
      :visible.sync="dialogTableVisible"
      width="60%"
      class="dilogStyle"
    >
      <div>
        <div class="listTit">
          <div>设备</div>
          <div
            class="el-icon-circle-plus-outline"
            @click="addEqmentRow(1)"
          ></div>
        </div>
        <el-table
          border
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="equipmentTableData"
          style="width: 100%"
        >
          <el-table-column prop="name" label="设备名称">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                autocomplete="off"
                size="small"
                placeholder="请输入设备名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="model" label="设备型号">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.model"
                autocomplete="off"
                size="small"
                placeholder="请输入设备型号"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="brand" label="设备品牌">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.brand"
                autocomplete="off"
                size="small"
                placeholder="请输入设备品牌"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="设备数量">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.count"
                autocomplete="off"
                size="small"
                placeholder="请输入设备数量"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="设备单位">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.unit"
                autocomplete="off"
                size="small"
                placeholder="请输入设备单位"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleDeleteRow(scope.row, 1)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 12px">
        <div class="listTit">
          <div>材料</div>
          <div
            class="el-icon-circle-plus-outline"
            @click="addEqmentRow(2)"
          ></div>
        </div>
        <el-table
          border
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="materialTableData"
          style="width: 100%"
        >
          <el-table-column prop="name" label="材料名称">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                autocomplete="off"
                size="small"
                placeholder="请输入材料名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="model" label="材料型号">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.model"
                autocomplete="off"
                size="small"
                placeholder="请输入材料型号"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="brand" label="材料品牌">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.brand"
                autocomplete="off"
                size="small"
                placeholder="请输入材料品牌"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="材料数量">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.count"
                autocomplete="off"
                size="small"
                placeholder="请输入材料数量"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="unit" label="材料单位">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.unit"
                autocomplete="off"
                size="small"
                placeholder="请输入材料单位"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleDeleteRow(scope.row, 2)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogTableVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="submitEqMent"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogTableVisible: false,
      equipmentTableData: [], //设备
      materialTableData: [], //材料
    };
  },
  methods: {
    openEqumentDialog(equipment, material) {
        console.log('接受设备',equipment)
        console.log('接受材料',material)
      this.dialogTableVisible = true;
      this.equipmentTableData = equipment;
      this.materialTableData = material;
    },
    addEqmentRow(who) {
      if (who == 1) {
        //设备
        let member = this.equipmentTableData.length + 1;
        this.equipmentTableData.push({
          key: member,
          brand: "", //品牌
          count: "", //数量
          model: "", //型号
          name: "", //名称
          unit: "", //单位
          type: '', //类型
          id: '', //id
          shop_id: '', //店铺id
          spec_id: '', //规格id
          goods_id: '', //商品id
        });
      } else {
        let member = this.materialTableData.length + 1;
        this.materialTableData.push({
          key: member,
          brand: "", //品牌
          count: "", //数量
          model: "", //型号
          name: "", //名称
          unit: "", //单位
          type: '', //类型
          id: '', //id
          shop_id: '', //店铺id
          spec_id: '', //规格id
          goods_id: '', //商品id
        });
      }
    },
    handleDeleteRow(row, type) {
      console.log(row, "删除");
      let tableDatas =
        type == 1 ? this.equipmentTableData : this.materialTableData;
      for (var i = 0; i < tableDatas.length; i++) {
        if (tableDatas[i].key == row.key) {
          tableDatas.splice(i, 1);
        }
      }
    },
    submitEqMent() {
      console.log(this.equipmentTableData, "设备");
      console.log(this.materialTableData, "材料");
      this.$emit("acceptEqMent", {
        equipmentTableData: this.equipmentTableData,
        materialTableData: this.materialTableData,
      });
      this.dialogTableVisible = false;
    },
  },
};
</script>

<style scoped>
.listTit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.listTit div {
  font-size: 16px;
  color: #333;
}
.dilogStyle >>> .el-dialog__header {
  border-bottom: 1px solid #ebeef5;
}
.dilogStyle >>> .el-dialog__body {
  padding-top: 10px;
  height: 500px;
  overflow-y: auto;
}
.dilogStyle >>> .el-dialog__footer {
  border-top: 1px solid #ebeef5;
}
</style>