vue前端开发仿钉图系列（7）底部数据列表的开发详解

　　底部数据列表主要是记录图层下面对应的点线面数据，点击单元行或者查看或者编辑，弹出右侧编辑页面，点击单元行地图定位到相应的绘图位置。里面的难点1是动态绑定字段管理编辑的字段以及对应的value值，2是点击查看或编辑的时候做事件修饰符，阻止事件冒泡，3是点击单元行展示绘图信息，并定位到相应的位置，4是根据点线面类型，展示不同的列表数据。整理总结不易，如需全部代码，请联系我15098950589（微信同号）。和以往一样，先发一下效果图。

 

　　核心代码如下

<template>
<div class="JNPF-common-layout">
<div class="JNPF-common-layout-center">
<el-row class="JNPF-common-search-box" :gutter="16">
<el-form @submit.native.prevent>
<el-col :span="6">
<el-form-item label="关键词">
<el-input v-model="keyword" placeholder="请输入关键词查询" clearable
@keyup.enter.native="search()" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="search()">
{{$t('common.search')}}
</el-button>
<el-button icon="el-icon-refresh-right" @click="refresh()">{{$t('common.reset')}}
</el-button>
</el-form-item>
</el-col>
</el-form>
<span class="rightclose" @click="handleClose">
<i class="el-icon-close"></i>
</span>
</el-row>
<div class="JNPF-common-layout-main JNPF-flex-main">
<JNPF-table v-loading="listLoading" :data="list" @expand-change="expandChange" :hasNO="false"
@sort-change="sortChange" :row-class-name="tableRowClassName" @row-click="cellRowClick">
<el-table-column type="index" width="100" label="序号" align="center" />
<el-table-column prop="markName" label="标记名称" width="150" sortable="custom" />

<el-table-column v-if="layerType===1" prop="lineLength" label="线段长度(km)" width="150"
sortable="custom">
</el-table-column>
<el-table-column v-if="layerType===2" prop="surArea" label="面积(km²)" width="150"
sortable="custom" />

<el-table-column v-if="layerType===0" prop="markLocation" label="详细地址" width="300"
sortable="custom" />
<el-table-column v-if="layerType===0" prop="longitude" label="经度" width="100" sortable="custom" />
<el-table-column v-if="layerType===0" prop="latitude" label="纬度" width="100" sortable="custom" />

<el-table-column v-for="(item,index) in fieldList" :prop="item.fieldName" :label="item.fieldName"
width="120" sortable="custom">
<template slot-scope="scope">{{scope.row.list[index].fieldValue}}</template>
</el-table-column>
<el-table-column prop="createUser" label="创建人员" width="150" sortable="custom" />
<el-table-column prop="createTime" label="创建时间" width="150">
<template slot-scope="scope">{{scope.row.createTime| toDate()}}</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template slot-scope="scope">
<el-button size="mini" type="text" @click.stop="handleLook(scope.row)">查看
</el-button>
<el-button size="mini" type="text" @click.stop="handleEdit(scope.row)">编辑
</el-button>
<el-button size="mini" type="text" class="JNPF-table-delBtn"
@click.stop="handleDel(scope.$index,scope.row.id)">删除
</el-button>
</template>
</el-table-column>
</JNPF-table>
<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
@pagination="initData" />
</div>
</div>
</div>
</template>

 

tableRowClassName({
row,
rowIndex
}) {
row.index = rowIndex;
},
//单元行点击事件
cellRowClick(row) {

let item=this.list[row.index];

console.log('当前行', row.index,item.layerType,item)
setTimeout(() => {
//累加展开所有的marker数据
if (item.layerType === 0) {
this.$emit("childPushDotMarker", item)

} else if (item.layerType === 1) {
this.$emit("childPushLineMarker", item)

} else if (item.layerType === 2) {
this.$emit("childPushPolygonMarker", item)
}
},1000)
}

 

　　整理总结不易，如需全部代码，请联系我15098950589（微信同号）。