效果图：

 

  <el-form
      :inline="true"
      :model="searchForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input
          v-model="searchForm.farmerId"
          placeholder="户主编号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          type="year"
          placeholder="选择年份"
          v-model="searchForm.year"
          style="width: 100%"
          format="yyyy"
          value-format="yyyy"
          :disabled="disabled"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="searchForm.taskId"
          placeholder="任务id"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button
          v-if="isAuth('pesticide:useinfo:save')"
          type="primary"
          @click="addOrUpdateHandle()"
          >新增</el-button
        >
        <el-button
          v-if="isAuth('pesticide:useinfo:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
          >批量删除</el-button
        >
      </el-form-item>
    </el-form>

然后table部分，主要为了突出table中的删除功能我只保留了多选框以及第一列

 

 

 <el-table
      :data="dataList"
      border
      @selection-change="selectionChangeHandle"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50"
      >
      </el-table-column>
      <el-table-column
        prop="startDate"
        header-align="center"
        align="center"
        label="任务开始时间"
      >
      </el-table-column>
    
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="isAuth('pesticide:useinfo:info')"
            type="text"
            size="small"
            @click="showDetails(scope.row.id)"
            >查看</el-button
          >
          <el-button
            v-if="isAuth('pesticide:useinfo:update')"
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row.id)"
            >修改</el-button
          >
          <el-button
            v-if="isAuth('pesticide:useinfo:delete')"
            type="text"
            size="small"
            @click="deleteHandle(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

删除的方法

  //  删除
    deleteHandle (id) {
      let ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm('确定对所选项进行[删除]操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: '/pesticide/useinfo/delete',
          method: 'post',
          data: ids
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500
            })
            this.getDataList()
          }
        })
      }).catch(() => {
      })
    }

新增：

// 新增 / 修改
    addOrUpdateHandle (id) {
      this.$router.push({
        name: 'backUseinfo',
        params: {
          id: id,
          disable: false
        }
      })
      // this.addOrUpdateVisible = true
      // this.$nextTick(() => {
      //   this.$refs.addOrUpdate.init(id)
      // })
    },

这里是在router中新增了路由

 一点击新增就路由跳转到了一个新的页面

效果图如下，点击保存之后，要把这张表里所有的信息都弄到跳转之前的那个表里去。

 上部分是需要填写的表单

下部分是一个表格需要填写

表单部分

 <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
        :inline="true"
      >
        <div style="margin-bottom: 20px">
          <!--         <el-button
            type="white"
            @click="
              $router.push({
                name: 'pesticide-useinfo',
              })
            "
            >返回</el-button
          >

                     <el-button
            v-if="!disabled"
            type="primary"
            @click="dataFormSubmit()"
            >保存</el-button
          > -->
          <el-button
            @click="addOneLine()"
            style="right: 75px; position: absolute; margin-top: 20px"
            type="primary"
            :disabled="isnewone"
            >新增记录</el-button
          >
          <el-button
            @click="deleteHandle()"
            style="right: 200px; position: absolute; margin-top: 20px"
            type="danger"
            :disabled="dataListSelections.length <= 0"
            >批量删除</el-button
          >
          <!--            <el-button
          v-if="!disabled"
          type="primary"
          @click="dataFormSubmit()"
          >新增</el-button
        > -->
        </div>
        <div>
          <el-form-item label="户主编号" prop="farmerId">
            <!-- <el-input
              v-model="dataForm.farmerId"
              :disabled="disabled"
              placeholder="户主编号"
              onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
              :maxlength="15"
            ></el-input> -->
            <el-tooltip
              class="item"
              effect="dark"
              content="请先填写农户信息表的户主编号"
              placement="top"
            >
              <el-button style="width: 150px; height: 36px"> </el-button>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="年份" prop="dateyear">
            <!-- <el-input
            v-model="dataForm.dateyear"
            :disabled="disabled"
            placeholder="年份"
          ></el-input> -->
            <el-date-picker
              type="year"
              placeholder="选择年份"
              v-model="dataForm.dateyear"
              style="width: 100%"
              format="yyyy"
              value-format="yyyy"
              :disabled="true"
            ></el-date-picker>
          </el-form-item>
          <!-- <el-form-item label="任务id" prop="taskId">
            <el-input
              onkeyup="this.value = this.value.replace(/[\u4E00-\u9FA5]/g,'');"
              v-model="dataForm.taskId"
              :disabled="disabled"
              placeholder="任务id"
              :maxlength="15"
            ></el-input>
          </el-form-item> -->
        </div>
      </el-form>

表格部分

<el-table
        :data="dataForm.details"
        @selection-change="selectionChangeHandle"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="id"
          align="center"
          label="农药购买记录"
          width="150"
        >
          <el-table-column align="center" type="index" width="50">
          </el-table-column>
          <el-table-column
            prop="purchaseDate"
            align="center"
            label="日期"
            width="140"
          >
            <template slot-scope="scope">
              <!-- <el-input
                v-model="scope.row.sowingDate"
                :disabled="disabled"
                placeholder=""
              ></el-input> -->
              <!-- <el-date-picker
                size="small"
                type="datetime"
                placeholder="播种日期"
                v-model.trim="scope.row.purchaseDate"
                style="width: 100%"
                :disabled="disabled"
                format="MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker> -->
              <el-date-picker
                v-model="scope.row.purchaseDate"
                type="date"
                placeholder="日期"
                :disabled="disabled"
                style="width: 100%"
                format="MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            prop="pdNo"
            align="center"
            label="农药登记证号"
            filterable
            width="180"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.pdNo"
                filterable
                remote
                clearable
                :disabled="true"
                reserve-keyword
                placeholder="请输入农药登记证号"
                :remote-method="remoteMethod"
                :loading="remoteLoading"
              >
                <el-option
                  v-for="item in remoteOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="commonName"
            align="center"
            label="农药通用名"
            width="180"
          >
            <template slot-scope="scope">
              <!-- <el-input
                v-model.trim="scope.row.commonName"
                :disabled="disabled"
                :maxlength="15"
                placeholder="农药通用名"
              ></el-input> -->
              <el-select
                v-model="scope.row.commonName"
                filterable
                remote
                reserve-keyword
                placeholder="请输入农药通用名"
                :remote-method="remoteMethodName"
                :loading="nameLoading"
                @change="
                  (val) => {
                    commonSelectChange(val, scope.row)
                  }
                "
              >
                <!-- <el-option
                  v-for="item in nameOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> -->
                <el-option
                  v-for="item in nameOptions"
                  :key="item.pdNo"
                  :label="item.commonName"
                  :value="item"
                >
                  <!--:value="item" 绑定整条数据item-->
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="purchaseAmount"
            align="center"
            label="农药购买量(克、毫升）"
            width="180"
          >
            <template slot-scope="scope">
              <el-input-number
                size="small"
                :disabled="disabled"
                v-model.trim="scope.row.purchaseAmount"
                :min="0"
                :max="10000"
                label="农药购买量（克、毫升）"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="purchaseCost"
            align="center"
            label="购买费用"
            width="160"
          >
            <template slot-scope="scope">
              <el-input-number
                size="small"
                :disabled="disabled"
                v-model.trim="scope.row.purchaseCost"
                :min="0"
                :max="1000000"
                label="购买费用"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="packagings"
            align="center"
            label="包装物"
            width="180"
          >
            <template slot-scope="scope">
              <el-input
                v-model.trim="scope.row.packagings"
                :disabled="disabled"
                :maxlength="10"
                placeholder="包装物"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="packingSpecification"
            align="center"
            label="包装规格(克、毫升)/(瓶、袋)"
            width="180"
          >
            <!-- <template slot-scope="scope">
              <el-input
                v-model.trim="scope.row.packingSpecification"
                :disabled="disabled"
                :maxlength="10"
                placeholder="包装规格(克、毫升)/(瓶、袋)"
              ></el-input>
            </template> -->
            <template slot-scope="scope">
              <el-input-number
                size="small"
                :disabled="disabled"
                v-model.trim="scope.row.packingSpecification"
                :min="0"
                :max="10000"
                label="包装规格(克、毫升)/(瓶、袋)"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="农药使用去向记录"
          width="180"
        >
          <el-table-column
            prop="medicationDate"
            align="center"
            label="用药日期"
            width="180"
          >
            <template slot-scope="scope">
              <!-- <el-input
                v-model="scope.row.sowingDate"
                :disabled="disabled"
                placeholder=""
              ></el-input> -->
              <!-- <el-date-picker
                type="datetime"
                placeholder="播种日期"
                v-model.trim="scope.row.medicationDate"
                style="width: 100%"
                :disabled="disabled"
                format="MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker> -->
              <el-date-picker
                v-model="scope.row.medicationDate"
                type="date"
                placeholder="播种日期"
                :disabled="disabled"
                style="width: 100%"
                format="MM-dd"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            prop="cropId"
            align="center"
            label="用药作物名称"
            width="180"
          >
            <template slot-scope="scope">
              <!-- <el-input
                v-model.trim="scope.row.cropId"
                :disabled="disabled"
                :maxlength="10"
                placeholder="用药作物名称"
              ></el-input> -->
              <el-select
                v-model.trim="scope.row.cropId"
                :disabled="disabled"
                :maxlength="10"
                clearable
                placeholder="用药作物名称"
              >
                <el-option
                  v-for="item in cropList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="controlObject"
            label="防治对象名称(病虫草鼠种类)"
            width="180"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                v-model.trim="scope.row.controlObject"
                :disabled="disabled"
                :maxlength="10"
                placeholder="防治对象名称(病虫草鼠种类)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="medicationArea"
            align="center"
            label="用药面积(亩)"
            width="200"
          >
            <template slot-scope="scope">
              <!-- <el-input
                v-model="scope.row.plantingArea"
                :disabled="disabled"
                placeholder=""
              ></el-input> -->
              <el-input-number
                :disabled="disabled"
                v-model.trim="scope.row.medicationArea"
                :min="0"
                :max="10000000"
                label="种植面积（亩）"
                size="small"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop=" totalDosage"
            align="center"
            label="合计用药量(克、毫升)"
            width="220"
          >
            <!-- <template slot-scope="scope">
              <el-input
                v-model.trim="scope.row.totalDosage"
                :disabled="disabled"
                :maxlength="10"
                placeholder="合计用药量(克、毫升)"
              ></el-input>
            </template> -->
            <template slot-scope="scope">
              <el-input-number
                size="small"
                :disabled="disabled"
                v-model.trim="scope.row.totalDosage"
                :min="0"
                :max="10000"
                label="合计用药量(克、毫升)"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table-column>
        <!-- <el-table-column
          header-align="center"
          align="center"
          width="150"
          label="操作"
        >
          <el-button
            v-if="isAuth('pesticide:useinfo:delete')"
            type="text"
            size="small"
            @click="deleteHandle()"
            >删除</el-button
          >
        </el-table-column> -->
      </el-table>

下