效果图：

 

  <el-form:inline="true":model="searchForm"@keyup.enter.native="getDataList()"><el-form-item><el-inputv-model="searchForm.farmerId"placeholder="户主编号"clearable></el-input></el-form-item><el-form-item><el-date-pickertype="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-inputv-model="searchForm.taskId"placeholder="任务id"clearable></el-input></el-form-item><el-form-item><el-button @click="getDataList()">查询</el-button><el-buttonv-if="isAuth('pesticide:useinfo:save')"type="primary"@click="addOrUpdateHandle()">新增</el-button><el-buttonv-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-columntype="selection"header-align="center"align="center"width="50"></el-table-column><el-table-columnprop="startDate"header-align="center"align="center"label="任务开始时间"></el-table-column><el-table-columnfixed="right"header-align="center"align="center"width="150"label="操作"><template slot-scope="scope"><el-buttonv-if="isAuth('pesticide:useinfo:info')"type="text"size="small"@click="showDetails(scope.row.id)">查看</el-button><el-buttonv-if="isAuth('pesticide:useinfo:update')"type="text"size="small"@click="addOrUpdateHandle(scope.row.id)">修改</el-button><el-buttonv-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-buttontype="white"@click="$router.push({name: 'pesticide-useinfo',})">返回</el-button><el-buttonv-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-buttonv-if="!disabled"type="primary"@click="dataFormSubmit()">新增</el-button> --></div><div><el-form-item label="户主编号" prop="farmerId"><!-- <el-inputv-model="dataForm.farmerId":disabled="disabled"placeholder="户主编号"onkeyup="this.value = this.value.replace(/[^\d.]/g,'');":maxlength="15"></el-input> --><el-tooltipclass="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-inputv-model="dataForm.dateyear":disabled="disabled"placeholder="年份"></el-input> --><el-date-pickertype="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-inputonkeyup="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-columnprop="id"align="center"label="农药购买记录"width="150"><el-table-column align="center" type="index" width="50"></el-table-column><el-table-columnprop="purchaseDate"align="center"label="日期"width="140"><template slot-scope="scope"><!-- <el-inputv-model="scope.row.sowingDate":disabled="disabled"placeholder=""></el-input> --><!-- <el-date-pickersize="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-pickerv-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-columnprop="pdNo"align="center"label="农药登记证号"filterablewidth="180"><template slot-scope="scope"><el-selectv-model="scope.row.pdNo"filterableremoteclearable:disabled="true"reserve-keywordplaceholder="请输入农药登记证号":remote-method="remoteMethod":loading="remoteLoading"><el-optionv-for="item in remoteOptions":key="item.value":label="item.label":value="item.value"></el-option></el-select></template></el-table-column><el-table-columnprop="commonName"align="center"label="农药通用名"width="180"><template slot-scope="scope"><!-- <el-inputv-model.trim="scope.row.commonName":disabled="disabled":maxlength="15"placeholder="农药通用名"></el-input> --><el-selectv-model="scope.row.commonName"filterableremotereserve-keywordplaceholder="请输入农药通用名":remote-method="remoteMethodName":loading="nameLoading"@change="(val) => {commonSelectChange(val, scope.row)}"><!-- <el-optionv-for="item in nameOptions":key="item.value":label="item.label":value="item.value"></el-option> --><el-optionv-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-columnprop="purchaseAmount"align="center"label="农药购买量(克、毫升）"width="180"><template slot-scope="scope"><el-input-numbersize="small":disabled="disabled"v-model.trim="scope.row.purchaseAmount":min="0":max="10000"label="农药购买量（克、毫升）"></el-input-number></template></el-table-column><el-table-columnprop="purchaseCost"align="center"label="购买费用"width="160"><template slot-scope="scope"><el-input-numbersize="small":disabled="disabled"v-model.trim="scope.row.purchaseCost":min="0":max="1000000"label="购买费用"></el-input-number></template></el-table-column><el-table-columnprop="packagings"align="center"label="包装物"width="180"><template slot-scope="scope"><el-inputv-model.trim="scope.row.packagings":disabled="disabled":maxlength="10"placeholder="包装物"></el-input></template></el-table-column><el-table-columnprop="packingSpecification"align="center"label="包装规格(克、毫升)/(瓶、袋)"width="180"><!-- <template slot-scope="scope"><el-inputv-model.trim="scope.row.packingSpecification":disabled="disabled":maxlength="10"placeholder="包装规格(克、毫升)/(瓶、袋)"></el-input></template> --><template slot-scope="scope"><el-input-numbersize="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-columnprop="name"align="center"label="农药使用去向记录"width="180"><el-table-columnprop="medicationDate"align="center"label="用药日期"width="180"><template slot-scope="scope"><!-- <el-inputv-model="scope.row.sowingDate":disabled="disabled"placeholder=""></el-input> --><!-- <el-date-pickertype="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-pickerv-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-columnprop="cropId"align="center"label="用药作物名称"width="180"><template slot-scope="scope"><!-- <el-inputv-model.trim="scope.row.cropId":disabled="disabled":maxlength="10"placeholder="用药作物名称"></el-input> --><el-selectv-model.trim="scope.row.cropId":disabled="disabled":maxlength="10"clearableplaceholder="用药作物名称"><el-optionv-for="item in cropList":key="item.value":label="item.label":value="item.value"></el-option></el-select></template></el-table-column><el-table-columnprop="controlObject"label="防治对象名称(病虫草鼠种类)"width="180"align="center"><template slot-scope="scope"><el-inputv-model.trim="scope.row.controlObject":disabled="disabled":maxlength="10"placeholder="防治对象名称(病虫草鼠种类)"></el-input></template></el-table-column><el-table-columnprop="medicationArea"align="center"label="用药面积(亩)"width="200"><template slot-scope="scope"><!-- <el-inputv-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-columnprop=" totalDosage"align="center"label="合计用药量(克、毫升)"width="220"><!-- <template slot-scope="scope"><el-inputv-model.trim="scope.row.totalDosage":disabled="disabled":maxlength="10"placeholder="合计用药量(克、毫升)"></el-input></template> --><template slot-scope="scope"><el-input-numbersize="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-columnheader-align="center"align="center"width="150"label="操作"><el-buttonv-if="isAuth('pesticide:useinfo:delete')"type="text"size="small"@click="deleteHandle()">删除</el-button></el-table-column> --></el-table>

下