前端开发笔记（记录开发中常用知识点）

1.vue和element项目中，如何根据后端传递过来的0和1数字进行判断，在表格中展示不同的内容

在Vue和Element项目中，你可以使用条件渲染指令 v-if 和 v-else 来根据后端传递过来的 0 和 1 数字进行判断，在表格中展示不同的内容。下面是一些示例代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="status" label="Status">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1">Active</span>
          <span v-else>Inactive</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', status: 1 },
        { name: 'Jane', status: 0 },
        { name: 'Bob', status: 1 },
      ]
    };
  }
};
</script>

2.HTTP请求报错：400 Bad Request解决方法！！（终极整理）

参考博客：
HTTP请求报错：400 Bad Request解决方法！！（终极整理）

3.vue和element项目中，使用相对路径显示本地图片

<template>
  <div>
    <img :src="imageUrl">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '/assets/image.png'
    }
  }
}
</script>

在组件的data属性中，将imageUrl属性的值设置为图片的绝对路径，以显示本地图片。由于图片被作为静态资源打包，因此可以使用相对于根目录的绝对路径来引用图片，无需使用相对路径或@别名。
需要注意的是，在使用绝对路径引用本地图片时，路径应该以/开头，并且图片文件应该存储在public文件夹中的子文件夹中，如public/assets。这样可以确保图片被打包为静态资源，并可以在打包后的项目中正确引用。

4.vue调取查询接口的过程中加入loading加载效果

加载动画效果

还可以在查询接口函数中使用this.$loading()函数，当查询结束时使用this.$loading().close();进行关闭

5.vue多选框选择，选择排斥方案处理

问题描述： 如图

比如上面的这个需求，前三个选项只能选择一个，最后一个选项可选可不选。

代码如下：

handlePlanChoiceChange(val) {
      const isGt = val.length >= 1;
      const notEqOne = val.length != 1

      //方案选择：电气一，高压设备布置方案选择特殊处理
      if (((isGt) && (val[0].projPlanId === 13 || val[0].projPlanId === 104))) {
        var projPlanChoiceId = val.map(item => item.projPlanChoiceId);
        //风电
        const validElementsFD = [24, 25, 26];
        const validElementCountFD = projPlanChoiceId.filter(item => validElementsFD.includes(item)).length;
        const has985FD = projPlanChoiceId.includes(985);
        //光伏
        const validElementsGF= [491, 492, 493];
        const validElementCountGF = projPlanChoiceId.filter(item => validElementsGF.includes(item)).length;
        const has985GF = projPlanChoiceId.includes(980);
        if ((validElementCountFD === 1 && (has985FD || !has985FD)) || (validElementCountGF === 1 && (has985GF || !has985GF))) {
          console.log('满足条件');
        } else {
          this.$modal.alertError("你的选择有误，请重新选择。（提示：前三个选项请选择其中的一个，最后一个选项可选可不选）");
          this.clearTable();
          this.chosenChoiceIds = [];
        }
      }

      //方案选择：选【无排洪设施】时，上面5种方案不能选，选了按5种任一方案时，不能选【无排洪设施】
      if (((isGt) && (val[0].projPlanId === 34 || val[0].projPlanId === 129))) {
        val.forEach(item => {
          if ((notEqOne) && (item.projPlanChoiceId === 109 || item.projPlanChoiceId === 590)) {
            this.$modal.msgError("选择" + item.projPlanChoiceName + "时，不能选择其他方案，请重新选择！");
            this.clearTable();
            this.chosenChoiceIds = [];
          }
        })
      }
      //方案选择：选【无防排烟】时，上面4种方案不能选，选了按4种任一方案时，不能选【无防排烟】
      if (((isGt) && (val[0].projPlanId === 31 || val[0].projPlanId === 126))) {
        val.forEach(item => {
          if ((item.projPlanChoiceId === 93 || item.projPlanChoiceId === 574) && notEqOne) {
            this.$modal.msgError("选择" + item.projPlanChoiceName + "时，不能选择其他方案，请重新选择！");
            this.clearTable();
            this.chosenChoiceIds = [];
          }
        })
      }
      //进站道路桥涵，同上
      if (((isGt) && (val[0].projPlanId === 35 || val[0].projPlanId === 130))) {
        val.forEach(item => {
          if ((notEqOne) && (item.projPlanChoiceId == 113 || item.projPlanChoiceId == 594)) {
            this.$modal.msgError("选择" + item.projPlanChoiceName + "时，不能选择其他方案，请重新选择！");
            this.clearTable();
            this.chosenChoiceIds = [];
          }
        })
      }
      //检修道路桥涵，同上
      if (((isGt) && (val[0].projPlanId === 36 || val[0].projPlanId === 131))) {
        val.forEach(item => {
          if ((notEqOne) && (item.projPlanChoiceId == 117 || item.projPlanChoiceId == 598)) {
            this.$modal.msgError("选择" + item.projPlanChoiceName + "时，不能选择其他方案，请重新选择！");
            this.clearTable();
            this.chosenChoiceIds = [];
          }
        })
      }
      //护坡，同上
      if (((isGt) && (val[0].projPlanId === 37 || val[0].projPlanId === 132))) {
        val.forEach(item => {
          if ((notEqOne) && (item.projPlanChoiceId == 120 || item.projPlanChoiceId == 601)) {
            this.$modal.msgError("选择" + item.projPlanChoiceName + "时，不能选择其他方案，请重新选择！");
            this.clearTable();
            this.chosenChoiceIds = [];
          }
        })
      }

      //挡土墙，同上
      if (((isGt) && (val[0].projPlanId === 38 || val[0].projPlanId === 133))) {
        val.forEach(item => {
          if ((notEqOne) && (item.projPlanChoiceId == 124 || item.projPlanChoiceId == 605)) {
            this.$modal.msgError("选择" + item.projPlanChoiceName + "时，不能选择其他方案，请重新选择！");
            this.clearTable();
            this.chosenChoiceIds = [];
          }
        })
      }

      //施工道路
      if (((isGt) && (val[0].projPlanId === 40 || val[0].projPlanId === 135))) {
        val.forEach(item => {
          if ((notEqOne) && (item.projPlanChoiceId == 128 || item.projPlanChoiceId == 609)) {
            this.$modal.msgError("选择" + item.projPlanChoiceName + "时，不能选择其他方案，请重新选择！");
            this.clearTable();
            this.chosenChoiceIds = [];
          }
        });

        const selectedIds = val.map(item => item.projPlanChoiceId);
        if (selectedIds.includes(129) || selectedIds.includes(610)) {
          const conflictingChoicesFD = [132, 133, 134];
          const conflictingChoicesGF = [613, 614, 615];
          const conflictingSelectionFD = conflictingChoicesFD.find(choiceId => selectedIds.includes(choiceId));

          const conflictingSelectionGF = conflictingChoicesGF.find(choiceId => selectedIds.includes(choiceId));
          if (conflictingSelectionFD || conflictingSelectionGF) {
            this.$modal.msgError("选择了有施工道路无桥涵，不能选择这个选项，请重新选择！");
            this.clearTable();
            this.chosenChoiceIds = [];
          }
        } else if ((selectedIds.includes(132) || selectedIds.includes(133) || selectedIds.includes(134))
            || (selectedIds.includes(613) || selectedIds.includes(614) || selectedIds.includes(615))) {
          if ((selectedIds.includes(129) || selectedIds.includes(128)) || (selectedIds.includes(610) || selectedIds.includes(609))) {
            this.$modal.msgError("只有选了有施工道路新建桥涵及有施工道路加固桥涵时，才可以进行选择，请重新选择！");
            this.clearTable();
            this.chosenChoiceIds = [];
          }
        }
      }
    },

解决方案：

可以拿到handlePlanChoiceChange(val) {}这个函数里面的val值，这个值就是一个数组，如上图所示，接下来就可以根据id进行过滤筛选。

6.vue路由中name的作用

作用：