elementui +vue2报错整理（持续整理中）

过滤数据

遇到需要过滤的数据 -------vue

filter ：

<!-- 在双花括号中 -->

{{ message | filterA('arg1', arg2) | filterB }}
<!-- filterA 被定义为接收三个参数的过滤器函数，其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中 -->

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

Vue.filter( id, [definition] )

// 全局过滤器
Vue.filter(‘过滤器名称’,function(data){
return data + “123”;
})


// 局部过滤器
//定义私有过滤器：过滤器有两个条件【过滤器名称 和 处理函数】
filters:{
  过滤器名称 : function(){ 
return  过滤值
}
}

在vue过滤器中 私有 优先于 全局

element过滤数据

在element中没有实际的标签，数据；这个时候就要用到element 自带的 :formatter=“tranSapce”

<el-table-column sortable prop="alterDes" label="人工修改目的地" width="190" :formatter="tranSapce"></el-table-column>

js:
tranSapce(row){
 // row行的信息
//方法逻辑
}

在需要业务逻辑的时候

使用vue slot 中的slot-scope=“scope”
子组件向父组件传值的方式

<el-table-column sortable prop="alterDes" label="人工修改目的地" width="190">
                <template slot-scope="scope">
               			 // 传入页面中的值scope.row.alterDes
                 		 <span v-html="tranSapce(scope.row.alterDes)"></span>
                </template>
</el-table-column>

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);
      //设置范围-------------------------------------
    },