<el-header height="62px" class="filter-container">
<el-row>
<el-col :span="21">
<el-form :inline="true" :model="formSearch" class="demo-form-inline">
<el-form-item>
<el-input v-model="formSearch.value" placeholder="请输入水道名称" clearable></el-input>
</el-form-item>
<el-form-item>
<el-select v-model="formSearch.type" filterable clearable placeholder="请选择水道类型">
<el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-select v-model="formSearch.official" placeholder="请选择水道性质" filterable clearable>
<el-option key="true" label="正式水道" value="true"></el-option>
<el-option key="false" label="测试水道" value="false"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loadMain" size="small" icon="el-icon-search" round>搜索</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :span="3" style="text-align: right">
<el-button @click="handleAdd" v-show="visibleBtnAdd" type="success" size="small" icon="el-icon-plus" round>新增水道</el-button>
</el-col>
</el-row>
</el-header>
<el-main ref="layoutMain" class="table-container">
<el-table :data="dataMain" :height="heightMain" stripe highlight-current-row class="el-table-border">
<el-table-column prop="name" label="水道名称"></el-table-column>
<el-table-column prop="swzName" label="水位站"></el-table-column>
<el-table-column prop="typeName" label="水道类型" width="100"></el-table-column>
<el-table-column prop="isOfficial" label="水道性质" align="center" width="100" :formatter="formatOfficial"></el-table-column>
<el-table-column prop="startName" label="水道起点" width="100"></el-table-column>
<el-table-column prop="endName" label="水道讫点" width="100"></el-table-column>
<el-table-column label="里程" width="100">
<template slot-scope="scope">{{ Math.abs(scope.row.endMileage - scope.row.startMileage) + '公里' }}</template>
</el-table-column>
<el-table-column prop="remark" label="水道概况" width="200"></el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="150">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row)" v-show="visibleBtnEdit" type="primary" size="mini" round plain>编辑</el-button>
<el-button @click="handleDelete(scope.row)" v-show="visibleBtnDelete" type="danger" size="mini" round plain>删除</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer>
<el-pagination
@size-change="handlePageSizeChange"
@current-change="handlePageCurrentChange"
:current-page="dataPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="dataSize"
:total="dataTotal"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</el-footer>
<el-dialog
:title="dataRecordTitle[actionDialogRecord]"
:visible.sync="visibleDialogRecord"
:close-on-click-modal="false"
:before-close="handleClose" >
<el-form
class="large-space"
ref="formRecord"
:model="formRecord"
:rules="ruleRecord"
label-position="left"
label-width="90px">
<el-row :gutter="24">
<el-col :span="4"><strong>图片信息</strong></el-col>
<el-col :span="20">
<el-upload
:action="imageUpload"
:headers="headers"
:with-credentials="true"
list-type="picture-card"
:file-list="formRecord.waterInfomationPicDTO"
:on-success="handleAvatarSuccess"
:on-preview="handlePictureCardPreview"
:before-upload="beforeAvatarUpload"
:on-remove="handleRemove" style="float: left; margin-bottom: 10px">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" size="tiny">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-col>
</el-row>
<el-form-item label="水道名称" prop="name">
<el-input v-model="formRecord.name"></el-input>
</el-form-item>
<el-row :gutter="20">
<el-col :span="12"><el-form-item label="水道类型" prop="type">
<el-select v-model="formRecord.type" filterable placeholder="请选择水道类型" style="width: 100%">
<el-option v-for="item in dataType" :key="item.value" :label="item.text" :value="item.value">
</el-option>
</el-select>
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="水道性质" prop="official">
<el-switch
v-model="formRecord.official"
:disabled.sync="disabledSelOfficial"
active-text="正式水道"
inactive-text="测试水道"
></el-switch>
</el-form-item></el-col>
</el-row>
<!-- <el-form-item label="位置" prop="waterway">
<map-box v-loading="loadingWaterway" @mapReady="handleMapReady" class="map-box"></map-box>
</el-form-item> -->
<el-row :gutter="20">
<el-col :span="12"><el-form-item label="水道起点" prop="start">
<el-select ref="selStart" v-model="formRecord.start" filterable placeholder="请选择水道起点" style="width: 100%">
<el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="水道讫点" prop="end">
<el-select ref="selEnd" v-model="formRecord.end" filterable placeholder="请选择水道讫点" style="width: 100%">
<el-option v-for="item in dataNode" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item></el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12"><el-form-item label="水位站" prop="swzId">
<el-select ref="selStation" v-model="formRecord.swzId" filterable placeholder="请选择关联水位站" style="width: 100%">
<el-option v-for="item in dataWaterStation" :key="item[0]" :label="item[1]" :value="item[0]">
</el-option>
</el-select>
</el-form-item></el-col>
</el-row>
<el-form-item label="水道概况" prop="remark">
<el-input type="textarea" v-model="formRecord.remark"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button @click="handleSave" type="primary">保存</el-button>
</div>
</el-dialog>
vue 修改的时候报undefind错误
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答 默认 最新
- shichengzhe 2019-05-19 10:24关注
data() {
return {
visibleBtnAdd: true,
visibleBtnEdit: true,
visibleBtnDelete: true,
formSearch: {
type: undefined,
value: '',
official: undefined
},
formRecord: {
id: null,
name: '',
type: null,
official: true,
waterway: null,
startId: null,
endId: null,
start: null,
end: null,
swzId: null,
remark: '',
waterInfomationPicDTO: []
},
在声明的时候,你的official属性错了,应该为true,希望能给你有些帮助本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 数学的三元一次方程求解
- ¥20 iqoo11 如何下载安装工程模式
- ¥15 本题的答案是不是有问题
- ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
- ¥15 C++使用Gunplot
- ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
- ¥15 matlab数字图像处理频率域滤波
- ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
- ¥15 ELGamal和paillier计算效率谁快?
- ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题