vue3+elementui相关问题 个人向（遇到问题会不定期更新）

这篇博客是记录我自己在工作中碰到的一些问题，旨在工作中遇到类似问题可以更快速的解决。

1.#default语法糖

.在今天工作中接触到了#default语法糖，之前从来没有使用过

#default可以理解为solt插槽的一种写法，可以接受具名插槽的值一般的写法如下：

<template #default="{ row, $index }">
                <el-button
                  type="text"
                  size="small"
                  style="color: red"
                  @click="deleteFormInf(row, $index)"
                  >删除</el-button>
              </template>

或者

<template #default="scope">
                <el-button
                  type="text"
                  size="small"
                  style="color: red"
                  @click="deleteFormInf(scope.row)"
                  >删除</el-button
                >
              </template>

这个语法糖可以帮助我们更好的使用vue插槽

=========================================================================

2024/1/16更新

2.今天在工作中遇到了，前端展示数据使用的坐标系和后端存储数据所使用的坐标系不同

今天在工作中遇到了，前端展示数据使用的坐标系和后端存储数据所使用的坐标系不同，前端用的坐标系是："EPSG:4326" 后端的坐标系是"EPSG:3857"，所以在发送请求和数据回显时需要处理数据，转变信息格式。

处理格式的代码是modifyEPSG中的代码，其他代码注释有标注，仅展示EPSG:4326转EPSG:3857，反之也是这样转

<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      vecLayer: "", // 图层
      coordinates: [], // 新增用的坐标
      geom: [], // 编辑用的坐标
      srcProj: "EPSG:4326", // 前端坐标系
      destProj: "EPSG:3857", // 后端坐标系
      format: new ol.format.GeoJSON(), //把数据格式化为genJson形式
    };
  },
  methods:{
      // 创建图层
    createVecLayer() {
      const vecLayer = new ol.layer.Vector({
        name:  "xxx图层",
        source: new ol.source.Vector(),
        visible: true,
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          stroke: new ol.style.Stroke({
            color: "#ffcc33",
            width: 5,
          }),
        }),
      });
      this.vecLayer = vecLayer;
      this.map.addLayer(vecLayer);
    },
    /**
     * @description 创建geojson形式要素
     * @param {*Array} val 传入的坐标数组
     */
    addFeature(val) {
      var data = {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: '根据自己所需的类型创建',
              coordinates: val,
            },
          },
        ],
      };
      return data;
    },
    /**
     * @description 坐标系转化
     * @param {*Array} coordinates 需要转换坐标系的坐标
     */
    modifyEPSG(coordinates) {
      this.vecLayer.getSource().clear();
      let feat = this.format.readFeature(coordinates);
      const theGeom = feat.getGeometry();
      if (!theGeom) {
        return;
      }
      feat.getGeometry().transform(this.srcProj, this.destProj);
      console.log(feat);
      this.vecLayer.getSource().addFeatures([feat]);
    },
  }
};
</script>
<style scope lang="scss"></style>

3.鼠标移入表格时鼠标的样式不变

elementui的el-table表格中表格会默认有一个鼠标移入表格行内变成小手的样式，有时我们的表格只用来做数据展示，并不存在需要点击的地方，所以需要吧这个效果取消掉，下面代码就可以取消该效果。

CSS代码：

<style>
.table-row td {
  cursor: default !important;
}
</style>

在el-table中设置 row-class-name="table-row"

<el-table row-class-name="table-row"> </el-table>

这样鼠标的样式就会更改啦！！！