本人的前端日常一、在做项目中遇到后端返回的数据中含有相同属性的对象，该怎样去重： ①代码如下：二、数组中sort()方

一、在做项目中遇到后端返回的数据中含有相同属性的对象，该怎样去重：

①代码如下：

    usewatertype() {
      let vm = this;
      vm.waterTypeOption = [];
      vm.$store.dispatch("creen/usewatertype", {}).then((res) => {
        console.log(res.data)
        // 去重数组中对象含有相同属性
        // [{Name:"你好",value:1111},{Name:"你好",value:2222}]的对象只保留只一个
        let obj = {};
        let result = [];
        for (let i = 0; i < res.data.length; i++) {
          if (!obj[res.data[i].Name]) {
            result.push(res.data[i]);
            obj[res.data[i].Name] = true;
          }
        }
        result.forEach((item) => {
          if (item.Name != "实收入水量") {
            vm.waterTypeOption.push({
              name: item.Name,
              value: item.Value,
              unit: "m³",
            });
          }
        });
      });
    },
  },

二、数组中sort()方法的使用：

三、highchart可调式地址：www.highcharts.com.cn/demo/highch…

四、echarts图表大全 ① ppchart.comer ②madeapie.com

五、flex布局遗留下来的问题：①省略号无效，②子元素内容过多，flex：number，分布宽度无效

六、掘金中3d环绕图片地址：juejin.cn/post/705028…

七、子传父遗留下来的问题：但是是因为点击事件在父组件当中去跳转路由，想在父组件所以初步想法就是现在该父组件当中清除子组件当中的定时器，想法过于复杂，其实最简单的方法就是利用destoryed()就行了 $VFS5TJW%V6{6IR[R_LMRK]Y.png$ 八、vsCode全屏红波浪线，是因为强制格式化的问题，在vscode内关闭就行了

![`H6E$47ZT2G4[VOYR8%O7G.png

D6FRJXON}P(L[PA$LSS1K.png 九、使用el-tree标签时只点击当前节点只获取到当前节点的信息，需求是为了获取当前节点到所有父节点的信息的方式

![A~73TGRH0SES} $]H$ ]M{LOQ.png](p9-juejin.byteimg.com/tos-cn-i-k3…?)

$5Q3BHC8TX_D28UH7}{_X1RU.png$ 代码如下：

    getRegionTree() {
      this.partAreaData = [];
      this.$store
        .dispatch("region/getRegionTree")
        .then(res => {
          if (res.code === 0) {
            this.partAreaData = res.data;
            this.defaultPartAreaShow = res.data[0].id;
            this.treeLoading = false;
          }
        })
        .catch(err => {
          console.log(err);
          this.treeLoading = false;
        });
    },
    // 关键字搜索分区
    filterNode(filterText, partAreaData) {
      if (!filterText) {
        return true;
      }
      return partAreaData.label.indexOf(filterText) !== -1;
    },
    selectChanged(val) {
      this.searchData.TypeId = val.ID;
    },
    // 使用el-tree标签时只点击当前节点只
    // 获取到当前节点的信息，需求是为了获取当前节点到所有父节点的信息
    // 选中分区点击树状图是，当点击某个分支的时候获取当前分支的所有信息
    handlePartNode(data, Node) {
      this.PartArea.RelationMeters = [];
      let vm = this;
      vm.currentPage4 = 1;
      vm.getpart(data, Node);
      vm.getSeacrhDetail();
      vm.searchList.RegionTypeId = data.regiontypeid;
      vm.searchList.RegionId = data.id;
    },
    // 该方法是为了获取点击当前支点就会获取到所有父级
    // 分支名称避免了只有点击当前分支只获取当前分支信息的情况
    getpart(data, Node) {
      let vm = this;
      if (data.regiontypeid === 13001) {
        vm.PartArea.CityId = data.id;
        vm.PartArea.CityName = data.label;
        vm.PartArea.DistrictId = null;
        vm.PartArea.DistrictName = "";
        vm.PartArea.StreetId = null;
        vm.PartArea.StreetName = "";
        vm.PartArea.CommunityId = null;
        vm.PartArea.CommunityName = "";
        vm.PartArea.PartAreaId = null;
        vm.PartArea.PartArea = "";
        vm.PartArea.RegionTypeId = data.regiontypeid;
        vm.PartArea.RegionId = data.id;
      }
      if (data.regiontypeid === 13002) {
        vm.PartArea.DistrictId = data.id;
        vm.PartArea.DistrictName = data.label;
        vm.PartArea.StreetId = null;
        vm.PartArea.StreetName = "";
        vm.PartArea.CommunityId = null;
        vm.PartArea.CommunityName = "";
        vm.PartArea.PartAreaId = null;
        vm.PartArea.PartArea = "";
        vm.PartArea.CityId = Node.parent.key ? Node.parent.key : null;
        vm.PartArea.CityName = Node.parent.label ? Node.parent.label : null;
        vm.PartArea.RegionTypeId = data.regiontypeid;
        vm.PartArea.RegionId = data.id;
      }
      if (data.regiontypeid === 13003) {
        vm.PartArea.StreetId = data.id;
        vm.PartArea.StreetName = data.label;
        vm.PartArea.CommunityId = null;
        vm.PartArea.CommunityName = "";
        vm.PartArea.PartAreaId = null;
        vm.PartArea.PartArea = "";
        vm.PartArea.RegionTypeId = data.regiontypeid;
        vm.PartArea.RegionId = data.id;
        if (Node.parent.key) {
          vm.PartArea.DistrictId = Node.parent.key;
          vm.PartArea.DistrictName = Node.parent.label;
          vm.PartArea.RegionTypeId = data.regiontypeid;
          vm.PartArea.RegionId = data.id;
          if (Node.parent.parent.key) {
            vm.PartArea.CityId = Node.parent.parent.key;
            vm.PartArea.CityName = Node.parent.parent.label;
            vm.PartArea.RegionTypeId = data.regiontypeid;
            vm.PartArea.RegionId = data.id;
          }
        }
      }
      if (data.regiontypeid === 13004) {
        vm.PartArea.CommunityId = data.id;
        vm.PartArea.CommunityName = data.label;
        vm.PartArea.StreetId = Node.parent.key;
        vm.PartArea.PartAreaId = null;
        vm.PartArea.PartArea = "";
        vm.PartArea.StreetName = Node.parent.label;
        vm.PartArea.RegionTypeId = data.regiontypeid;
        vm.PartArea.RegionId = data.id;
        if (Node.parent.parent.key) {
          vm.PartArea.DistrictId = Node.parent.parent.key;
          vm.PartArea.DistrictName = Node.parent.parent.label;
          vm.PartArea.RegionTypeId = data.regiontypeid;
          vm.PartArea.RegionId = data.id;
          if (Node.parent.parent.parent.key) {
            vm.PartArea.CityId = Node.parent.parent.parent.key;
            vm.PartArea.CityName = Node.parent.parent.parent.label;
            vm.PartArea.RegionTypeId = data.regiontypeid;
            vm.PartArea.RegionId = data.id;
          }
        }
      }
      if (data.regiontypeid === 13005) {
        vm.PartArea.PartAreaId = data.id;
        vm.PartArea.PartArea = data.label;
        vm.PartArea.RegionTypeId = data.regiontypeid;
        vm.PartArea.RegionId = data.id;
        vm.PartArea.CommunityId = Node.parent.key;
        vm.PartArea.CommunityName = Node.parent.label;
        vm.PartArea.StreetId = Node.parent.parent.key;
        vm.PartArea.StreetName = Node.parent.parent.label;
        if (Node.parent.parent.parent.key) {
          vm.PartArea.DistrictId = Node.parent.parent.parent.key;
          vm.PartArea.DistrictName = Node.parent.parent.parent.label;
          vm.PartArea.RegionTypeId = data.regiontypeid;
          vm.PartArea.RegionId = data.id;
          if (Node.parent.parent.parent.parent.key) {
            vm.PartArea.CityId = Node.parent.parent.parent.parent.key;
            vm.PartArea.CityName = Node.parent.parent.parent.parent.label;
            vm.PartArea.RegionTypeId = data.regiontypeid;
            vm.PartArea.RegionId = data.id;
          }
        }
      }
    }

十、父传子，子传父，自己的写法：

X%2)UVF@UW43H9TNF$UJ9.png 十一、解决当一个组件共用多个路由时，且每个路由一层一层的层级关系，也就是多层详情页，当跳转到五级路由时返回到四级路由，页面不会发生变化，唯有回到一级路由时才会刷新页面的问题：

CX%OYIDLPAVJJ2M9CB6QXU8.png

![Z{~K4NKA_WK2{CUM{AF)52.png 代码如下： ①app.vue文件当中：

  <div id="app">
    <!-- <keep-alive> <router-view :key="key" /></keep-alive> -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" :key="key"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    document.body.addEventListener("focusout", () => {
      // 回到原点  若觉得一瞬间回到底部不够炫酷，那自己可以自定义缓慢回弹效果， 可用css 、贝塞尔曲线、js的 requestAnimationFrame  等等 方法 实现体验性更好的回弹效果
      window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
    });
  },
  computed: {
    key() {
      // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同
      return this.$route.fullPath;
    },
  },
};
</script>
<style>
html,
body,
#app {
  height: 100%;
  width: 100%;
}
</style>

②、点击跳转详情页的当前列表页面的点击方法

    showMeter(item, id) {
      if (item.MeterLevel === 12001) {
        this.$router.push({
          // name: `secondaryMeter`,
          path: `/meterlist/${id}`,
        });
        this.currIndex = 1;
        this.meterList = [];
      } else if (item.MeterLevel === 12002) {
        this.$router.push({
          // name: `tertiaryMeter`,
          path: `/secondaryMeter/${id}`,
        });
        this.currIndex = 1;
        this.meterList = [];
      } else if (item.MeterLevel === 12003) {
        this.$router.push({
          // name: `fourMeter`,
          path: `/tertiaryMeter/${id}`,
        });
        this.currIndex = 1;
        this.meterList = [];
      } else if (item.MeterLevel === 12004) {
        this.$router.push({
          // name: `fiveMeter`,
          path: `/fourMeter/${id}`,
        });
        this.currIndex = 1;
        this.meterList = [];
      }
    },

③、router.js文件中：

  {
    path: '/meterlist',
    name: 'meterlist',
    component: () => import('@/views/meter/meterlist'),
    props: true,
    meta: {
      requireAuth: true //表示该路由需要登录验证后才能进入  在切换路径跳转路由之前作判断
    },
  },
  // 用户水表详情
  {
    path: '/meterdetail',
    name: 'meterdetail',
    component: () => import('@/views/meter/meterdetail'),
  },
  //二级水表
  {
    path: '/meterlist/:Id',
    // path: '/secondaryMeter',
    name: 'secondaryMeter',
    component: () => import('@/views/meter/meterlist'),
    props: true,
    meta: {
      requireAuth: true //表示该路由需要登录验证后才能进入  在切换路径跳转路由之前作判断
    },
  },
  // 三级水表
  {
    path: '/secondaryMeter/:Id',
    // path: '/tertiaryMeter',
    name: 'tertiaryMeter',
    component: () => import('@/views/meter/meterlist'),
    props: true,
    meta: {
      requireAuth: true //表示该路由需要登录验证后才能进入  在切换路径跳转路由之前作判断
    },
  },
  // 四级水表
  {
    path: '/tertiaryMeter/:Id',
    // path: '/fourMeter',
    name: 'fourMeter',
    component: () => import('@/views/meter/meterlist'),
    props: true,
  },
  // 五级水表
  {
    path: '/fourMeter/:Id',
    // path: '/fiveMeter',
    name: 'fiveMeter',
    component: () => import('@/views/meter/meterlist'),
    props: true,
  },

十二、点击for循环中的某个节点时不会影响其他节点的样式，只改变当前节点的样式：

![_[I7EWHGXI497CT)8IXPIL.png

代码如下： ①、点击事件中的内容，最重要的就是event.currentTarget

    handle1(event, item, id) {
      let _el = event.currentTarget;
      //判断当前节点的类名是否存在active
      if (_el.getAttribute("class") === "active") {
        _el.setAttribute("class", "");
      } else {
        _el.setAttribute("class", "active"); //如果不存在添加active属性,隐藏该节点
      }
      this.btnShow = false;
      this.playId = id;
      this.handChecked(item, id);
    },

②、节点当中：

        <span class="title1">
          <img
            v-if="item.Exception === 0"
            src="@/assets/摄像头green.png"
            alt=""
          />
          <img v-if="item.Exception === 1" src="@/assets/摄像头.jpg" alt="" />
          <span class="code" v-if="item.Exception === 0">正常 </span>
          <span class="code1" v-if="item.Exception === 1">掉线 </span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {{ addressName[index] }} &nbsp;&nbsp;{{ item.DeviceName }}
        </span>
        <div ref="videocontain" class="videocontain">
          <div class="activeItem" :id="`video_${item.id}`" ref="video">
            <van-icon
              @click="handle1($event, item, item.id)"
              id="btn"
              name="play-circle-o"
              size="80"
            />
          </div>
        </div>

十三、插槽的bug header具名插槽中数据不响应的问题解决方式：slot="header" 改为 #header 即可（#为v-slot缩写）

<el-table-column align="center">
        <!-- 插槽的bug  header具名插槽中数据不响应的问题解决方式：slot="header" 改为 #header 即可（#为v-slot缩写）-->
        <template v-slot:header>
          <el-select
            v-model="selectArea"
            placeholder="设备名称"
            @change="selectAreaChange"
          >
            <el-option
              v-for="item in areaOptions"
              :key="item.Id"
              :label="item.DeviceRegistRelations[0].DeviceName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </template>
        <template slot-scope="{ row }">
          <span>{{ row.DeviceName }}</span>
        </template>
      </el-table-column>

效果如下：

总结：以上只是自己在工作中遇到的问题，以方便自己今后在碰到类似的问题，无论在何处度可以来查看到，仅此而已，也希望能够帮助到有需要的人