Alguns problemas encontrados pelo sistema de fundo vue

1. A caixa de diálogo da interface do usuário do elemento executará a verificação do formulário somente quando a verificação do formulário aparecer

Solução: Adicione o evento close e o evento open para executar este comando $refs['form'].resetFields(); após fechar a janela pop-up

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

O 'formulário' aqui   é o valor da referência definido pelo formulário. Dessa forma, o formulário pode ser redefinido automaticamente quando o formulário é enviado ou fechado.

2. A caixa de diálogo do elemento ui pode não obter o valor válido para verificação do formulário, portanto, o botão OK não pode executar a verificação do formulário

Solução: transforme a caixa de diálogo da interface do usuário em um componente separado para uso

3. As strings devem ser divididas em arrays por símbolos

Solução: Use split() diretamente, como: separar strings em arrays por vírgulas split(",")

4. A tabela precisa ter barra de rolagem, mas a página não tem barra de rolagem

Solução: defina a altura visual vh para a mesa

5. Não há habilidade suficiente para usar gráficos antv

Solução: Leia atentamente a documentação da API no site oficial

6. Várias maneiras de encontrar elementos especificados em uma matriz

7. O formulário de entrada para modificação de dados às vezes não atualiza

Solução: this.$forceUpdate()

8. A estrutura da árvore elementUI A árvore modifica a altura de cada linha

solução:

.el-tree-node__content {

  height: 40px;

}

9. modifique a altura da caixa de entrada elementUI

solução:

 .el-input__inner {

  height: 30px;

  margin-bottom: 5px;

}

10. Para modificar o estilo do componente, use o seletor de profundidade

Seletor de profundidade::v-deep é mais geral

11.Vue Error：[ElTable] prop row-key é obrigatório

Solução: o formulário element-ui seleciona várias opções e você precisa adicionar: row-key="id" à el-table

12. A recepção do Vue.js relata a solução de erro de cancelamento não capturada (na promessa)

Solução: o método this.$confirm tem um método de promessa embutido, então .catch() não pode ser removido (porque não pode ser capturado ao cancelar a operação)

13. Depois que a caixa de entrada el-input usa oninput ou onkeyup, a ligação bidirecional v-model falha.

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

14. Resolva o problema que a caixa de prompt aparece apenas quando há duas ou mais linhas na tabela element-ui table

//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. Ao usar o valor da chave do objeto como outro objeto de matriz

 ObjectName[OtherArrayObject.Value]

16. A lista de descrição do elemento-ui é usada principalmente para alinhar alguns dados.