descarga de archivos vue y método js

1. El método de búsqueda de cadenas no ignora las mayúsculas y minúsculas por defecto, '111'.search('1'), buscará el primer carácter coincidente y devolverá su subíndice - 0, si no hay ninguna coincidencia, devolverá -1

2. VUE obtiene el elemento actualmente seleccionado, podemos hacer clic en el elemento secundario para modificar el valor del atributo del elemento principal o modificar el valor del atributo del elemento actual, etc.

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








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

Obtener solicitud, el backend devuelve la descarga del flujo de archivos

 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);
    },

flujo de archivos para solicitudes posteriores

 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 para determinar si el valor es un método de matriz

uno,

Array.isArray(this.valueInfo)

dos, 

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

            this.editList.orgIds &&

            this.editList.orgIds.length

tres,

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

js juzga si el valor es un método de objeto

val?.constructor === Objeto // verdadero significa objeto

4. Alias ​​de configuración de Webpack alias y vue use @ ruta en css para informar de error 

archivo webpack.base.conf.js

 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')
    }
  },

Recuerde reiniciar la instalación de npm después de escribir y luego iniciar el proyecto 

El cargador css interpretará la URL de la ruta no raíz como una ruta relativa y agregará el prefijo ~ para interpretarla como una ruta de módulo (~@ representa la ruta raíz).

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

5. Método de importación y exportación front-end

1,

En el desarrollo diario, a menudo necesitamos importar algunos archivos 

export const routes: RouteRecordRaw[] = [];

Cuando hay múltiples variables o métodos con el mismo nombre, debe usar la ruta de importación de cambio de nombre {importar el nombre de la variable como nuevo nombre};

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. Cuando hay muchos nombres de variables de exportación

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

Usamos exportar todo al importar

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

o

/** 药品说明书 */
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';

al usarlo

RouteNamesConst.COURSE_LIST

3.

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

igual

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';

igual

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)
}

 igual

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. El monitoreo de @change de elementui, el nivel de datos del modelo v es demasiado profundo para monitorear, y @change a menudo no se activa

El @cambio de elementui de vue a veces se activa y a veces no se activa

La escena es así, cuando haces clic en editar, es claro que al id se le asigna un valor pero @change no se detecta, por lo que no se llama a la interfaz para hacer eco de los datos relevantes, la solución es juzgar al hacer clic en editar. Si la identificación tiene un valor, ajuste directamente la interfaz en lugar de esperar. Con @cambiar, esto puede causar que la interfaz se ajuste dos veces a veces, pero esta es una buena solución. En algunos escenarios, también puede establecer variables, y si son llamados, no serán llamados de nuevo

  <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>

editar punto

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