elementui +vue2报错整理（持续整理中）
过滤数据
遇到需要过滤的数据 -------vue
filter ：
{
{ message | filterA('arg1', arg2) | filterB }}
Vue.filter( id, [definition] )
// 全局过滤器
Vue.filter(‘过滤器名称’,function(data){
return data + “123”;
})
// 局部过滤器
//定义私有过滤器：过滤器有两个条件【过滤器名称 和 处理函数】
filters:{
过滤器名称 : function(){
return 过滤值
}
}
在vue过滤器中 私有 优先于 全局
element过滤数据
在element中没有实际的标签，数据；这个时候就要用到element 自带的 :formatter=“tranSapce”
在需要业务逻辑的时候
使用vue slot 中的slot-scope=“scope”
子组件向父组件传值的方式
// 传入页面中的值scope.row.alterDes
js:
tranSapce(row){
//方法逻辑
let locationVal = row;
let resp ="初始化数据";
for(var item in this.alllocationMapBox){
if (this.alllocationMapBox[item].value == locationVal){
resp = this.alllocationMapBox[item].label;
break;
}
}
return resp;
}
处理数据
处理请求数据条件
在实际的情况中；后台推送需要判断的数据；如数据状态status为2/1修改/新增，3为删除时；需要对获取到的数据进行现有数据筛选替换，遍历没有的数据进行新增，已有数据改变
这个时候就可以使用MAP映射的方式进行数据更新
将获取到的值通过方法传入
使用MAP.key的方式对象过滤数据
handleBackendData(backendDataList) {
// backendDataList 为 []
var listdataMap = this.filterwebSVal(backendDataList); // 将使用的数据进行过滤MAP映射
},
filterwebSVal(backendDataList) {
if (!backendDataList || backendDataList.length < 1) { // 判断传入数据是否为空
return {};
} else if (!this.dataInfo || this.dataInfo.length < 1) { // 判断渲染数据this.dataInfo是否为空
this.dataInfo.push(backendDataList[0]); //强行进行赋值 防止循环报错
}
var dataListMap = {}; // 定义一个对象
for (let i = 0; i < this.dataInfo.length; i++) { //将唯一的 已有数据ID 值作为 对象 KEY 值
dataListMap[this.dataInfo[i].taskInfo.taskId] = this.dataInfo[i]; // 对KEY值进行赋值
}
for (var index in backendDataList) { // 遍历对象
var bgTaskInfo = backendDataList[index].taskInfo; // 简化 传入数据层级 方便找到ID数据
var taskStatus = backendDataList[index].taskStatus; //条件值taskStatus
if (taskStatus >= 3) {
// 删除对象
dataListMap[bgTaskInfo.taskId] = null; //已有数据已经渲染在dataInfo中；获取到传入数据的ID值，通过MAP.key 重新赋值
} else {
dataListMap[bgTaskInfo.taskId] = backendDataList[index];
}
}
return dataListMap; //返回已经过滤并且唯一ID标识的数据；防止数据重复并修改替换数据
},
将过滤完成后的数据 push到数组中 清除空数据
handleBackendData(backendDataList) {
var listdataMap = this.filterwebSVal(backendDataList);
var respList = this.listMapToList(listdataMap); //通过循环将已有MAP数据转化为Arr
}
listMapToList(listDataMap) {
var respList = []; //数组盒子
for (var field in listDataMap) { //遍历对象
if (listDataMap[field]) { //排除状态为3时的空数据
respList.push(listDataMap[field]);
}
}
return respList;
},
清空本地dataInfo 将新数据list值赋值给本地
handleBackendData(backendDataList) {
var listdataMap = this.filterwebSVal(backendDataList);
var respList = this.listMapToList(listdataMap);
// 更新到本地的 dataInfo;
let dataInfoLen = this.dataInfo.length;
this.dataInfo.splice(0, dataInfoLen); //清空
if (respList && respList.length > 0) {
//判断是否为空
for (var i in respList) {
//遍历数值
this.dataInfo[i] = Object.assign({
}, respList[i]); //对象赋值给数组
}
}
},
排序
handleBackendData(backendDataList) {
var listdataMap = this.filterwebSVal(backendDataList);
var respList = this.listMapToList(listdataMap);
// 更新到本地的 dataInfo;
let dataInfoLen = this.dataInfo.length;
this.dataInfo.splice(0, dataInfoLen);
if (respList && respList.length > 0) {
for (var i in respList) {
this.dataInfo[i] = Object.assign({
}, respList[i]);
}
}
this.dataInfo.sort((a, b) => {
var aTaskId = a.taskInfo.taskId.substring(1); //处理ID前的标识
var bTaskId = b.taskInfo.taskId.substring(1);
return bTaskId - aTaskId; // 逆序排列
});
this.dataInfo.splice(-1, 0); //强制刷新数组
this.$forceUpdate();
},
element表格表单封装
表单
data() {
return {
// 查询表单
seachInfo: {
form: {
//这里是v-module绑定的数据
time: [],
locoNo: "",
taskId: "",
taskStat: ""
},
formShow: [
//表单对象
{
lable: "任务时间",
name: "time",
type: "timeselect"
},
{
lable: "机车号",
name: "locoNo",
type: "select",
optionVal: jsonData.locoNo
},
{
lable: "任务ID",
name: "taskId",
type: "input"
},
{
lable: "机车任务状态",
name: "taskStat",
type: "select",
optionVal: jsonData.TaskStat
}
] //表格数据
}
}
}
<div id="formList">
<el-form :inline="true" :model="seachInfo.form">
<el-form-item
v-for="(_item,_index) in seachInfo.formShow"
:label="_item.lable"
:key="_index"
label-width="width: 100px;"
>
<!-- 时间选择 -->
<DatePicker
v-if="_item.type == 'timeselect'"
type="datetimerange"
placeholder="任务开始时间选择"
format="yyyy-MM-dd HH:mm:ss"
style="width: 330px;color:#eee!important;"
:value="seachInfo.form[_item.name]"
@on-change="seachInfo.form[_item.name]=$event"
></DatePicker>
<!-- ----------下拉框-------------- -->
<el-select
:value="seachInfo.form[_item.name]"
v-model="seachInfo.form[_item.name]"
clearable
placeholder="请选择"
v-if="_item.type == 'select'"
style="width: 250px;color:#eee!important;"
>
<el-option
v-for="opitem in _item.optionVal"
:key="opitem.value"
:label="opitem.label"
:value="opitem.value"
></el-option>
</el-select>
<!-- ----------input-------------- -->
<el-input
size="small"
clearable
:value="seachInfo.form[_item.name]"
v-model="seachInfo.form[_item.name]"
placeholder="请输入"
style="width: 250px;color:#eee!important;"
v-if="_item.type == 'input'"
></el-input>
</el-form-item>
<el-form-item style="float: right;">
<el-button
size="medium"
type="primary"
style="background-color:rgb(192, 214, 228);color:rgb(64,102,126);border:none; width='350px'"
@click="cearClick"
>重 置</el-button>
<el-button
size="medium"
type="primary"
icon="el-icon-search"
style="background-color:rgb(192, 214, 228);color:rgb(64,102,126);border:none; width='350px'"
@click="seachClick(seachInfo.form)"
>查询</el-button>
</el-form-item>
</el-form>
<div id="page"></div>
</div>
表格
dataTH: {
taskId: "任务号",
taskStat: "任务状态",
taskRcvTime: "任务接受时间",
taskStartTime: "任务开始时间",
taskEndTime: "任务结束时间",
locoNo: "机车号",
curLocation: "机车起始地点",
dest: "机车目的地",
tpc1No: "TPC号",
tpc1Src: "TPC起始地点",
tpc1Dest: "TPC任务目的地",
operation: "操作"
},
// 注意获取到数据格式一定相同
<div id="HistoryMsg">
<el-table
:data="tableSendInfo"
v-loading="loading"
border
size="100%"
style="width:100%;background-color:transparent;background-image:url('~@/assets/image/bottom.png');text-align:center;"
:row-style="{textAlign: 'center',color: '#fff'}"
:header-cell-style="{background:'rgba(14, 221, 240, 0.32)',color:'#fff',height:'60px',fontSize:'18px', textAlign: 'center'}"
>
<el-table-column v-for="(_item,_key) in dataTH" :key="_key" :prop="_key" :label="_item">
<!--数据过滤器-->
<template slot-scope="scope">
<el-button
v-if="curShow(scope.row,_key)"
@click="handleClick(scope.row)"
type="text"
size="small"
>子任务查询</el-button>
<span v-else-if="_key === 'taskStat'" v-html="getTaskStat(scope.row,_key)"></span>
<span v-else v-html="tranSapce(scope.row,_key)"></span>
</template>
</el-table-column>
</el-table>
<pagination v-bind:child-msg="pageparm" @callFather="callFather"></pagination>
</div>
leaflet使用
// 添加
showRouteInMap(index, parentIndex) {
let Temcolor = "yellow";
// 当坐标获取到数据的时候，进入渲染
this.tpcPath[parentIndex] = L.polyline(
坐标数据,
{
color: Temcolor
}
).addTo(this.map); //加载到哪
},
// 移除
removeMap(){
for (var i = 0; i < this.tpcPath.length; i++) {
if (this.tpcPath[i] != "" && this.tpcPath[i] != null) {
this.tpcPath[i].remove();
}
}
}
定义this.map
//函数用与加载地图
loadmap() {
// 加载geosever地图
this.map = new L.Map("trainBot", {
zoom: 17,
center: [21.05292, 110.50004],
boxZoom: true,
zoomControl: false
// setZoomAround: [21.0530010378, 110.5031084775]
});
var wmsLayer = L.tileLayer.wms(window.g.mapAddress, {
layers: window.g.mapName, //需要加载的图层
format: "image/png", //返回的数据格式
transparent: false
// crs: L.CRS.EPSG4326
});
this.map.addLayer(wmsLayer);
var corner1 = L.latLng(21.04867, 110.50802);
var corner2 = L.latLng(21.05824, 110.49169);
var bounds = L.latLngBounds(corner1, corner2);
this.map.setMaxBounds(bounds);
this.map.setMinZoom(16);
this.map.setMaxZoom(18);
//设置范围-------------------------------------
},