Algunos problemas encontrados por el sistema de fondo vue

1. El cuadro de diálogo Elemento ui realizará la verificación del formulario solo una vez que aparezca la verificación del formulario

Solución: agregue un evento de cierre y un evento de apertura para ejecutar este comando .$refs['form'].resetFields(); después de cerrar la ventana emergente

 getOpen() {
      // 移除校验状态
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });

El 'formulario' aquí   es el valor de la referencia establecida por el formulario. De esta manera, el formulario se puede restablecer automáticamente cuando se envía o se cierra.

2. Es posible que el cuadro de diálogo del elemento ui no obtenga el valor válido para la verificación del formulario, por lo que el botón Aceptar no puede realizar la verificación del formulario.

Solución: Convierta el diálogo del elemento ui en un componente separado para su uso

3. Las cadenas quieren dividirse en matrices por símbolos

Solución: use split() directamente, como: separar cadenas en matrices por comas split(",")

4. La tabla debe tener una barra de desplazamiento, pero la página no tiene una barra de desplazamiento.

Solución: establezca la altura visual vh en el formulario

5. No tiene la habilidad suficiente para usar gráficos antv

Solución: lea atentamente la documentación de la API en el sitio web oficial

6. Varias formas de encontrar elementos específicos en una matriz

7. El formulario de entrada para la modificación de datos a veces no se actualiza

Solución: this.$forceUpdate()

8. La estructura de árbol elementUI Tree modifica la altura de cada fila

solución:

.el-tree-node__content {

  height: 40px;

}

9. modificar la altura del cuadro de entrada elementUI

solución:

 .el-input__inner {

  height: 30px;

  margin-bottom: 5px;

}

10. Para modificar el estilo del componente, utilice el selector de profundidad

Selector de profundidad::v-deep es más general

11.Error de Vue: se requiere [ElTable] clave de fila prop

Solución: el formulario element-ui selecciona varias opciones y debe agregar: row-key="id" a la tabla el

12. La recepción de Vue.js informa de la solución de error de cancelación no detectada (en promesa)

Solución: el método this.$confirm tiene un método de promesa incorporado, por lo que .catch() no se puede eliminar (porque no se puede capturar al cancelar la operación)

13. Después de que el cuadro de entrada el-input use oninput o onkeyup, el enlace bidireccional del modelo v falla.

  <el-input
         v-model="form.currentPayAmount"
          @blur="form.currentPayAmount = $event.target.value"
          @input="input($event)"
        >
  </el-input>

14. Resuelva el problema de que el cuadro de aviso aparece solo cuando hay dos o más filas en la tabla de la tabla element-ui

//html
 <el-tooltip
              placement="top"
              v-model="scope.row.showTooltip"
              v-if="scope.row.schedulePoints[0].moduleName != ''"
              :open-delay="500"
              effect="dark"
            >
              <div slot="content">
                [{
   
   { scope.row.schedulePoints[1].moduleName }}]-[{
   
   {
                  scope.row.schedulePoints[1].className
                }}{
   
   { scope.row.schedulePoints[1].classNumber }}]
              </div>
              <div
                @mouseenter="showTips($event, scope.row, scope.$index)"
                class="curse"
                v-if="scope.row.schedulePoints[1].moduleName != ''"
              >
                [{
   
   { scope.row.schedulePoints[1].moduleName }}]-[{
   
   {
                  scope.row.schedulePoints[1].className
                }}{
   
   { scope.row.schedulePoints[1].classNumber }}]
              </div>
            </el-tooltip>

//js
 showTips(obj, row, index) {
      /*obj为鼠标移入时的事件对象*/

      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
      let TemporaryTag = document.createElement("span");
      TemporaryTag.innerText = `[ ${row.schedulePoints[0].moduleName} ]-[${row.schedulePoints[0].className}${row.schedulePoints[0].classNumber} ]`;
      TemporaryTag.className = "getTextWidth";
      document.querySelector("body").appendChild(TemporaryTag);
      let currentWidth = document.querySelector(".getTextWidth").offsetWidth;
      document.querySelector(".getTextWidth").remove();
      /*cellWidth为表格容器的宽度*/
      const cellWidth = obj.target.offsetWidth;
      console.log("currentWidth" + currentWidth);
      console.log("cellWidth" + cellWidth);
      /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
      if (currentWidth >= 2 * cellWidth) {
        row.showTooltip = true;
      } else {
        row.showTooltip = false;
      }
    },

//css
.curse {
  width: 100%;
  text-align: left;
  font-size: 16px;
  color: #1c2438;
  font-weight: 500;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

15. Al usar el valor clave del objeto como otro objeto de matriz

 NombreObjeto[OtroObjetoMatriz.Valor]

16. La lista de descripción de element-ui se usa principalmente para alinear algunos datos.