Vue-Datei-Download und JS-Methode

1. Die Suchmethode für Zeichenfolgen ignoriert standardmäßig nicht die Groß-/Kleinschreibung. '111'.search('1') sucht nach dem ersten übereinstimmenden Zeichen und gibt seinen Index - 0 zurück. Wenn es keine Übereinstimmung gibt, wird -1 zurückgegeben

2. VUE ruft das aktuell angeklickte Element ab. Wir können auf das untergeordnete Element klicken, um den Attributwert des übergeordneten Elements oder den Attributwert des aktuellen Elements usw. zu ändern.

             <label @click="seeIt($event)">所属地域</label>








seeIt(e){console.log('e :>> ', e);// e.target 是你当前点击的元素
// e.currentTarget 是你绑定事件的元素},

Anforderung abrufen, das Backend gibt den Dateistream-Download zurück

 batchExport() {
      if (!this.checkedIds.length) return this.$message.warning("请勾选数据");
       var token = sessionStorage.getItem("header");
      window.location.href =
        "/cbrc/work/book/export?token=" +
        token +
        "&ids=" +
        this.checkedIds.join(",");

// 第二种方法
   
      // this.$http({
      //   method: "GET",
      //   url: "/cbrc/work/book/export?ids=" + this.checkedIds.join(","),
      //   responseType: "blob"
      // }).then(res => {
      //   if (res) {
      //     this.downloadFile(res);
      //   }
      // });
    },
    downloadFile(res) {
      let url = window.URL.createObjectURL(
        new Blob([res.data], { type: res.headers["content-type"] })
      );
      let a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.setAttribute("download", `导出数据.xls`);
      document.body.appendChild(a);
      a.click();
      url = window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    },

Dateistream für Post-Anfragen

 batchExport() {
      if (!this.checkedIds.length) return this.$message.warning("请勾选数据");
      this.$http({
        method: "POST",
        url: "/cbrc/work/hint/export",
        responseType: "blob",
        data: {
          idStr: this.checkedIds.join(","),
        },
      }).then((res) => {
        if (res) {
          this.downloadFile(res);
        }
      });
    },
    downloadFile(res) {
      let url = window.URL.createObjectURL(
        new Blob([res.data], { type: res.headers["content-type"] })
      );
      let a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.setAttribute("download", `导出数据.xls`);
      document.body.appendChild(a);
      a.click();
      url = window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    },

js, um festzustellen, ob der Wert eine Array-Methode ist

eins,

Array.isArray(this.valueInfo)

zwei, 

 !(typeof this.editList.orgIds === "string") &&

            this.editList.orgIds &&

            this.editList.orgIds.length

drei,

val?.constructor === Array // true 代表为数组

js beurteilt, ob der Wert eine Objektmethode ist

val?.constructor === Object // true bedeutet Objekt

4. Webpack-Konfigurationsalias Alias ​​und Vue verwenden @-Pfad in CSS, um Fehler zu melden 

webpack.base.conf.js-Datei

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '@images': resolve('src/images'),
      // 'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')
    }
  },

Denken Sie daran, die NPM-Installation nach dem Schreiben neu zu starten und dann das Projekt zu starten 

Der CSS-Loader interpretiert die URL des Nicht-Root-Pfads als relativen Pfad und fügt das Präfix ~ hinzu, um sie als Modulpfad zu interpretieren (~@ stellt den Root-Pfad dar).

 // background: url(../../../images/mark.png) no-repeat left center;
    background: url(~@images/mark.png) no-repeat left center;

5. Front-End-Import- und Exportmethode

1、

In der täglichen Entwicklung müssen wir häufig einige Dateien importieren 

export const routes: RouteRecordRaw[] = [];

Wenn mehrere Variablen oder Methoden mit demselben Namen vorhanden sind, müssen Sie den Befehl rename import {import variable name as new name} from path;

import { routes as externalRoutes } from '@views/external';
import { routes as workbenchRoutes } from '@views/workbench';
import { routes as knowledgeSharingRoutes } from '@views/knowledge-sharing';
import { routes as operationsManagementRoutes } from '@views/operations-management';
import { routes as systemAdministrationRoutes } from '@views/system-administration';
import { routes as accountRoutes } from '@views/account';

2. Wenn es viele Exportvariablennamen gibt

/** 药品说明书 */
export const DRUG_MANUAL = Symbol('DRUG_MANUAL');
/** 课程配置 */
export const COURSE_CONFIGURATION = Symbol('COURSE_CONFIGURATION');
/** 课程列表 */
export const COURSE_LIST = Symbol('COURSE_LIST');

Beim Import verwenden wir „Alle exportieren“.

import * as RouteNamesConst from '../constants/route-names.constants';

oder

/** 药品说明书 */
const DRUG_MANUAL = Symbol('DRUG_MANUAL');
/** 课程配置 */
const COURSE_CONFIGURATION = Symbol('COURSE_CONFIGURATION');
/** 课程列表 */
const COURSE_LIST = Symbol('COURSE_LIST');
export default { DRUG_MANUAL, COURSE_CONFIGURATION, COURSE_LIST };

import RouteNamesConst from '../constants/route-names.constants';

wenn man es benutzt

RouteNamesConst.COURSE_LIST

3.

 export * as RouteNamesConst from './constants/route-names.constants';

gleich

import * as RouteNamesConst from './constants/route-names.constants';

export default RouteNamesConst;

export * from './constants/route-names.constants';//全部导出,不指定名称，直接使用的是导入文件中一个个指定的常量名

4.

export default imUtils;

export { default as imUtils } from './im-utils';

gleich

import imUtils from './im-utils';
export default imUtils;

5.

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

 gleich

module.exports =function assetsPath(_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

6. Bei der @change-Überwachung von elementui ist die Datenebene des V-Modells zu tief, um überwacht zu werden, und @change wird häufig nicht ausgelöst

Der @change von Vues Elementui wird manchmal ausgelöst und manchmal nicht

Die Szene sieht so aus: Wenn Sie auf „Bearbeiten“ klicken, ist klar, dass der ID ein Wert zugewiesen wurde, @change jedoch nicht erkannt wurde, sodass die Schnittstelle nicht aufgerufen wird, um die relevanten Daten wiederzugeben. Die Lösung besteht darin, zu beurteilen, wann Sie auf „Bearbeiten“ klicken. Wenn die ID einen Wert hat, passen Sie die Schnittstelle direkt an, anstatt zu warten. Bei @change kann dies dazu führen, dass die Schnittstelle manchmal zweimal angepasst wird, dies ist jedoch eine gute Lösung. In einigen Szenarien können Sie auch Variablen festlegen, und wenn ja gerufen werden, werden sie nicht noch einmal gerufen

  <el-cascader
              :options="organization"
              filterable
              v-model="addMessage.organization.id"
              :props="{
                checkStrictly: 'true',
                label: 'name',
                value: 'id',
                children: 'childrenList',
                emitPath: false,
                expandTrigger: 'hover'
              }"
              @change="getDepartment(addMessage.organization.id)"
              :show-all-levels="false"
            ></el-cascader>

Punkt bearbeiten

if (this.addMessage.organization.id) {
          this.getDepartment(this.addMessage.organization.id);
        }