每天HUI一点前端

1.接口js文档（9.14）

对于请求的外部接口，在书写上要额外添加js项目文件夹名称，因为后端不写

接口函数中形参要与引用保持一致

一般后面带返回数据的用get请求，post也可以

2.返回路径

this.$router.push({ path: '/project/project/traffic' })

返回路径要与页面真实路径相一致，而不是参考菜单中自己配置的路径

3.要清晰的知道自己想获取的是什么，逻辑结构要清晰

4.接口返回json数据（9.19）

auditStatus如果直接写在数据data中  auditStatus： ' ', 这是一个对象数据

但是写在表单 formsdata中，就是json格式数据

5.返回词典数据，都要在import后写dicts：[  ]

a.表单词典

<el-form-item label="项目标签:" prop="projectLabel">
   <el-select style="width:100%" clearable   v-model="queryParams.projectLabel"
     placeholder="请选择项目标签">
       <el-option v-for="dict in dict.type.project_label" :key="dict.value"               :label="dict.label" :value="dict.value">
       </el-option>
    </el-select>
</el-form-item>

b.表格词典

<el-table-column prop="projectLabel" align="center" label="项目标签">
    <template slot-scope="scope">
      <dict-tag :options="dict.type.project_label" :value="scope.row.projectLabel">
      </dict-tag>
    </template>
</el-table-column>

c.卡片词典

<el-col :span="8">
    <span class="name">项目标签:</span>
    <span>{{ formatDict(formdata.projectLabel) }}</span>
</el-col>

methods： {
    formatDict(dictKey) {
      return this.selectDictLabel(this.dict.type.project_label, dictKey);
    },
}

6.json数据格式（9.27）

不同数据格式的引用

        a.数组-对象

引用格式:   rows.[0].projectName,       rows.[1].children.projectName

        b.对象

引用格式：  data.projectName

7.异步操作（10.10）

async setInfo(item) { let ret = await getpoint(item.id)

async setInfo(item) { let ret = await this.$api.getpoint()这两种写法有什么区别

这两种写法的区别在于函数的调用方式和上下文环境。

第一种写法是在一个异步函数内部调用了另一个异步函数，使用了await关键字来等待异步操作的结果。这种写法通常用于处理异步操作之间的依赖关系，确保在执行下一个异步操作之前等待上一个异步操作完成。

第二种写法是在当前对象（this）的上下文环境中调用了一个名为getpoint的异步方法。它使用this.$api.getpoint()的方式来调用该方法，其中$api是当前对象的一个属性，指向一个包含getpoint方法的对象。这种方式适用于在当前对象的上下文中直接调用该异步方法，而不需要等待其结果。

总结来说，第一种写法是在一个异步函数内部调用另一个异步函数并等待其结果，适用于需要处理异步操作之间的依赖关系的情况；而第二种写法是在当前对象的上下文环境中直接调用异步方法，适用于不需要等待异步操作结果的情况。

8.过滤器-处理数据格式

<div>{{ data.id | num }}</div> // 在原数据后添加过滤函数名

filters：{
    num(value){
        if(!value) return;  // 有值就过滤
        return value.toLacaleString()
        }
    }

在百位前增添一个小数点

9.<style>中的样式区分(10.31)

#app-container { width: 100% }     #表示的是ID选择器，影响id属性，ID选择器主要用于页面中的特定元素

.app-container { width: 100%; }      .表示的是类选择器，影响class属性，类选择器可以应用于多个元素

10.树形结构选择器，多次点击区分是选中，还是取消选中，将原本的点击事件按钮替换称判断按钮，在判断函数中引用点击事件

<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="true"
        :filter-node-method="filterNode" ref="tree" highlight-current
        @check-change="handleCheckChange"  show-checkbox/>
// 部门树选项
        deptOptions: undefined,
        defaultProps: {
          label: "licensePlate"  //把child去掉就会变成没有树状的列表展开
        },
watch: {
      // 根据名称筛选树组件
      licensePlate(val) {
        this.$refs.tree.filter(val); //ref=tree
      }
    },
根据表单筛选节点这个还不太会
// 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.licensePlate.indexOf(value) !== -1; //用于查找指定字符或子字符串在字符串中首次出现的位置
      },
      handleCheckChange(nodeData, checked, indeterminate) {
        if (!checked) {
          // 取消选中节点时的操作
          console.log('取消选中节点:', nodeData);
        } else {
          // 选中节点时的操作
          console.log('选中节点:', nodeData);
          this.handleNodeClick(nodeData)
        }
      },
      // 节点单击事件
      handleNodeClick(data) {
        getNewGps(data.licensePlate).then(res=>{
          this.center=[res.data.longitude, res.data.latitude]
          this.initMap(this.center)
          this.addRow(data)
          this.queryParams.licensePlate = data.licensePlate //更新点击后车牌到查询参数
        });
      },

11.表格头属性中添加这两行 == 在列表每一列设置align="center"

<el-table
        :data="recordData"
        style="height:350px;overflow-y:auto;"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
      >
        <el-table-column prop="licensePlate" label="车牌号码"></el-table-column>
        <el-table-column prop="carType" label="车型" width="80"></el-table-column>

12.分页组件

使用elementUI自带的组件行不通，还是得用老一套的

<pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getRecord"
    />
queryParams: {
          pageNum: 1,
          pageSize: 10,
          licensePlate: null,
        },

13.页面跳转

//历史轨迹按钮跳转页面
      goTrack(data) {
        let params = {'licensePlate':data.licensePlate,'id':data.id};
        console.log(params)
        this.$router.push({ path: '/car/trajectory', query: params });
      },

另一个页面接收参数

this.pathParams.licensePlate = this.$route.query.licensePlate

14.树形结构自动框选， 需要传递每个框体的id号，然后调用树形结构的自带函数

//树形结构
        defaultProps: {
          id: 'id',
          label: 'licensePlate',
        },
        treeData: [],
this.$refs.tree.setCheckedKeys([this.$route.query.id]);

就能选中对应label标签行，但是如果想要通过标签行名称判断来选中框体是不可行的

15.地图需要引用对应模块的id标签

<!-- 地图 -->
      <div id="amap"></div>
// 地图相关函数
    initMap() {
      this.amap = new AMap.Map("amap", {
        resizeEnable: true, // 是否监控地图容器尺寸的变化
        center: [117.227039, 31.821815],//地图中心点
        zoom: 14, //地图显示的缩放级别
        zooms: [7, 20], // 缩放范围
        viewMode: '2D',
        pitch: 10, //地图倾斜，换视角
    });
  },

16.click和onclick的区别

click是对象的方法，onclick是事件，点击按钮后，先触发事件，再触发方法

1、onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么；click本身是方法，作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件

2、click可以理解为一次简单的触发，只执行一次，找不到以后就不再执行；onclick则是给这个id注册一种行为，可以重复触发

3、click 是方法，onclick是事件。执行click就是模拟鼠标点击，同时会触发onclick事件。

4、所以说jquery的click点击事件会在点击下拉框的时候触发一次，然后选中下拉项的时候再触发一次。所以可以使用change方法，change是发生改变的时候才触发，因此是正好触发一次。