表格可添加行可删除行可编辑

父组件调用
import addTable from “@/views/materialManagement/components/在这里插入代码片addTable”;

  <addTable
                style="max-height: 350px; overflow: auto"
                :tableData="formData.materialInfoList"
                :handleCellClick="handleCellClick"
                :editTableHead="editTableHead"
                probName="materialInfoList."
                :addTableInfo="addTableInfo"
                :deleteRow="deleteRow"
                :isEdit="isEdit"
              ></addTable>

    //可编辑表格id
      isEdit: "",
   editTableHead: [
        { prop: "date", label: "物资名称" },
        { prop: "name", label: "规格型号" },
        { prop: "province", label: "计量单位" },
        { prop: "city", label: "数量" },
        { prop: "address", label: "备注" },
      ],
 //表单属性
      formData: {
        field113: [
          {
            date: "",
            name: "",
            address: "",
            province: "",
            city: "",
          },
          {
            date: "添加行",
            name: "",
            address: "",
            province: "",
            city: "",
          },
        ],
      },
      rules: {
        field113: [
          {
            required: true,
            message: "请填写",
            trigger: "blur",
          },
        ],

      },

   //单元格单击可编辑表格
    handleCellClick(row, column) {
      if (column.label !== "操作") {
        this.isEdit =
          row.materialName === "添加行" ? "" : column.property + row.index;
      }
    },

    // 删除可编辑表格行
    deleteRow(index) {
      this.formData.materialInfoList.splice(index, 1);
    },
    //可编辑行添加空数组
    addTableInfo() {
      let data = {
        materialName: "",
        quantity: "",
        remark: "",
        specification: "",
        unit: "",
      };
      this.formData.materialInfoList.splice(
        this.formData.materialInfoList.length - 1,
        0,
        data
      );
      // this.formData.materialInfoList.push(data);
    },

main.js全局挂载
v-fo保证点击表格输入框自动聚焦

Vue.directive('fo', {
  inserted(el, binding, vnode) {
    // 聚焦元素
    el.querySelector('input').focus()
  }
})

组件代码

<template>
  <div>
    <el-table
      class="tableBox"
      :data="tableData"
      border
      :cell-class-name="cellClassName"
      @cell-click="handleCellClick"
      :span-method="arraySpanMethod"
      style="width: 100%"
    >
      <el-table-column
        v-for="item in editTableHead"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-form-item
            :prop="probName + scope.$index + '.' + item.prop"
            :rules="{
              required: scope.$index === tableData.length - 1 ? false : true,
              message: '请输入',
              trigger: 'blur',
            }"
          >
            <!--字段为quantity时限制只能输入数字-->
            <el-input
              v-if="item.prop + scope.$index === isEdit"
              :autofocus="true"
              v-fo
              @input="
                item.prop === 'quantity'
                  ? (scope.row[item.prop] = scope.row[item.prop].replace(
                      /[^\d]/g,
                      ''
                    ))
                  : ''
              "
              placeholder="请输入"
              v-model="scope.row[item.prop]"
            ></el-input>
            <span
              class="addBox"
              @click="addTableInfo"
              v-else-if="scope.$index === tableData.length - 1"
            >
              + {{ scope.row[item.prop] }}
            </span>

            <span v-else>{{ scope.row[item.prop] }}</span>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="50" align="center">
        <template slot-scope="scope">
          <i
            class="el-icon-delete"
            v-if="scope.$index > 0"
            @click="deleteRow(scope.$index, tableData)"
          ></i>

          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "addTable",
  props: {
    editTableHead: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    handleCellClick: {
      type: Function,
      default: function () {},
    },
    isEdit: {
      type: String,
      default: "",
    },
    probName: {
      type: String,
      default: "",
    },
    addTableInfo: {
      type: Function,
      default: function () {},
    },
    deleteRow: {
      type: Function,
      default: function () {},
    },
  },
  data() {
    return {};
  },
  watch: {},
  created() {},
  methods: {
    // 利用单元格的className方法，给行列索引赋值
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },
    //可编辑表格的最后一行合并行显示添加
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === this.tableData.length - 1) {
        // if (columnIndex === 0) {
        return [1, 6];
        // } else if (columnIndex === 1) {
        //   return [0, 0];
        // }
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep.tableBox {
  th {
    padding: 0;
    height: 34px;
    line-height: 34px;
  }
  td {
    padding: 0;
    height: 34px;
    line-height: 34px;
  }
  .el-input__inner {
    border: unset;
    padding: 0;
    text-align: center;
  }
  .addBox {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.tableBox {
  .el-table__fixed-right::before {
    background-color: unset;
  }
  .el-table__fixed::before {
    background-color: unset;
  }
}
</style>

备注：复合可编辑表格2.0版本，可设置下拉框，树形选择器，触发必填非必填校验等功能实现
源码下载https://download.csdn.net/download/weixin_44583871/86576452