vue el-table 动态添加行、删除行 动态验证添加行中表单的

vue el-table 动态添加行、删除行

需求：动态新增删除表格行，选择每一列的物料编码带出并展示 后面一串数据（物料名称、物料规格、单位等）
需要注意三个点：
1、动态增加行
2、动态验证行中表单值
3、怎么带出值

一、动态增加行代码

 
  <el-dialog :title="title" :visible.sync="materialOpen" width="900px" append-to-body>
      <el-form :rules="rules" ref="addRef" :model="ruleForm" class="dialogForm">
        <div class="table-order">
          <el-table :data="ruleForm.tableData" height="500px" border>
            <el-table-column type="index" :label="$t('operation.index')" width="50px" />
            <el-table-column prop="materialCoding" :label="$t('operation.materialCode')" width="140px">
              <template slot-scope="scope">
            <!--1.  :prop="'tableData.' + scope.$index + '.materialCoding'":每个新增的行数据独立-->
            <!--2.  :rules="rules.materialCode"  1和2动态验证表单-->
                <el-form-item :prop="'tableData.' + scope.$index + '.materialCoding'" :rules="rules.materialCode">
                  <el-select
                    :disabled="scrapStatus === 2 ? true : false"
                    v-model="scope.row.materialCoding"
                    :placeholder="$t('scrap.selected')"
                    style="width: 100%"
                    clearable
                    filterable
                    @change="changMaterial(scope.row, scope.$index)"
                  >
                    <el-option
                      v-for="item in materialData"
                      :key="item.id"
                      :label="item.materialCoding"
                      :value="item.materialCoding"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column prop="materialName" :label="$t('operation.materialName')" width="140px">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.materialName'" :rules="rules.materialName">
                  <el-select
                    :disabled="scrapStatus === 2 ? true : false"
                    v-model="scope.row.materialName"
                    :placeholder="$t('scrap.selected')"
                    style="width: 100%"
                    @change="changMaterial(scope.row, scope.$index)"
                    clearable
                    filterable
                  >
                    <el-option
                      v-for="item in materialData"
                      :key="item.id"
                      :label="item.materialName"
                      :value="item.materialName"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="materialSpecifications" :label="$t('operation.materialSp')" width="150px">
            </el-table-column>
            <el-table-column prop="materialUnit" :label="$t('operation.materialUnit')" width="150px"> </el-table-column>
            <!-- 账面数量 -->
            <el-table-column prop="bookAmount" :label="$t('operation.paperNum')" width="150px"> </el-table-column>
            <el-table-column prop="quantity" :label="$t('scrap.scrapNum')" width="150px">
              <template slot-scope="scope">
                <el-form-item :prop="'tableData.' + scope.$index + '.quantity'" :rules="rules.quantity">
                  <el-input
                    v-model="scope.row.quantity"
                    type="number"
                    :disabled="scrapStatus === 2 ? true : false"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <!-- 仓库 -->
            <el-table-column prop="materialName" :label="$t('scrap.warehouse')" width="140px">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'tableData.' + scope.$index + '.wh'"
                  :rules="rules.wh"
                  @keyup.enter.native="getmaterNumberValue"
                >
                  <el-select
                    :disabled="scrapStatus === 2 ? true : false"
                    v-model="scope.row.wh"
                    filterable
                    :placeholder="$t('warehouse.out.select')"
                    @change="handleWhChange($event, scope.$index)"
                  >
                    <el-option v-for="item in warehouseOptions" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <!-- 库区 -->
            <el-table-column prop="whAreaNumber" :label="$t('scrap.area')" width="140px">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'tableData.' + scope.$index + '.whAreaNumber'"
                  :rules="rules.materialName"
                  @keyup.enter.native="getmaterNumberValue"
                >
                  <el-select
                    v-model="scope.row.whAreaNumber"
                    filterable
                    @change="handleArea(scope)"
                    :placeholder="$t('warehouse.out.select')"
                    :disabled="scrapStatus === 2 ? true : false"
                  >
                    <el-option
                      v-for="item in whAreaOptionsArr[scope.$index]"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column prop="remark" :label="$t('operation.remark')" width="150px">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remark"
                  type="textarea"
                  :disabled="scrapStatus === 2 ? true : false"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column fixed="right">
              <template slot-scope="scope">
                <i
                  class="el-icon-circle-plus-outline plusIcon"
                  type="danger"
                  v-if="scope.$index < 1"
                  style="font-size: 30px; color: #67c23a; margin-right: 5px"
                  @click="addLine"
                ></i>

                <i
                  class="el-icon-remove-outline plusIcon"
                  type="danger"
                  v-if="scope.$index > 0"
                  style="font-size: 30px; color: #f56c6c"
                  @click="handleDelete(scope.$index, scope.row)"
                ></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- 新建展示 查看显示关闭 -->
        <el-button type="primary" @click="submitForm" v-if="scrapStatus === 1">{{ $t('scrap.scrap') }}</el-button>
        <el-button type="info" @click="cancel">{{ $t('materialCode.close') }}</el-button>
      </div>
    </el-dialog>

data中：

 // 表单校验
      rules: {
        materialCode: [
          {
            required: true,
            message: this.$t('materialManagement.please_fillIn_materialCode'),
            trigger: 'change',
          },
        ],
        materialName: [
          {
            required: true,
            message: this.$t('materialCode.please_fillIn_materialName'),
            trigger: 'change',
          },
        ],
        whAreaNumber: [
          {
            required: true,
            message: this.$t('scrap.selected'),
            trigger: 'change',
          },
        ],
        wh: [
          {
            required: true,
            message: this.$t('scrap.selected'),
            trigger: 'change',
          },
        ],
        quantity: [
          {
            required: true,
            message: this.$t('scrap.fillIn'),
            trigger: 'change',
          },
        ],
      },

methods中：

 // 选择物料
    changMaterial(row, index) {
    //这是调用接口：res作为接口返回值
      listManagement({ materialCoding: row.materialCoding }).then((res) => {
        /*
         * target: 要更改的数据源(可以是对象或者数组)
         * key：要更改的具体数据
         * value ：重新赋的值
         */
        this.$set(this.ruleForm.tableData, index, res.rows[0]);  //这样改变界面值
        // this.ruleForm.tableData[index] = res.rows[0];  这样改变不了界面的值
      });
    },
 addLine() {
      //添加新的行数
      this.ruleForm.tableData.push({
        materialCoding: null,
        materialName: null,
      });
    },
    handleDelete(index) {
      //删除行数
      this.ruleForm.tableData.splice(index, 1);
    },