vue+element 表单嵌套表格 增删改查
表单校验参考了https://blog.csdn.net/iamlujingtao/article/details/105186117
效果如图所示,主要做了一些美化和解决一些看着难受的点
代码如下,有时间再介绍
input v-model="listQuery.car" placeholder="车辆id" style="width: 200px" class="filter-item" clearable @keyup.enter.native="handleFilter" /> autocomplete v-model="listQuery.project" :fetch-suggestions="querySearchAsync" placeholder="项目名称" class="filter-item" clearable @clear="setBlur()" @keyup.enter.native="handleFilter" /> picker v-model="listQuery.startTime" type="datetime" placeholder="选择开始日期时间" class="filter-item" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" /> picker v-model="listQuery.endTime" type="datetime" placeholder="选择结束日期时间" class="filter-item" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" /> button class="filter-item" style="margin-left: 20px" icon="el-icon-search" plain round @click="handleFilter" > 搜索 button class="filter-item" style="margin-left: 10px" icon="el-icon-circle-plus-outline" plain round @click="add" > 新增 <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" :page-sizes.sync="pageSizes" @pagination="getTableData" /> if="row.edit"> else>{{ row.car }} if="row.edit"> else>{{ row.project }} if="row.edit"> else> {{ row.startTime }} picker v-model="row.startTime" type="datetime" placeholder="请选择日期" align="center" size="small" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" /> if="row.edit"> else> {{ row.endTime }} picker v-model="row.endTime" type="datetime" placeholder="请选择日期" align="center" size="small" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" /> if="!row.edit"> else>button id="edit-button" size="small" plain round icon="el-icon-edit" type="primary" @click="handleEdit(row)" > 修改 button :id="'deleteButton'+$index" size="small" style="margin-left: 15px" plain round icon="el-icon-delete" type="danger" @click="confirmDelete($index,row)" > 删除 button id="confirm-save-button" size="small" plain round icon="el-icon-circle-check" type="success" @click="confirmSave($index,row)" >{{ '保存' }} button id="cancel-save-button" style="margin-left: 15px" size="small" plain round icon="el-icon-circle-close" type="info" @click="cancelSave($index,row)" >{{ '取消保存' }}