el-input n'a pas besoin d'appeler l'interface pour interroger les données du formulaire

Avant d'écrire un projet, j'appelle toujours l'interface d'arrière-plan sur l'entrée, puis je l'interroge. La méthode suivante n'est pas utilisée. Vous n'avez qu'à entrer le contenu dans le formulaire d'entrée, et les données du formulaire seront automatiquement recherchées en fonction de l'entrée contenu.

1. Écrivez d'abord une entrée el

 <el-input
        :placeholder="查询表单数据"
        class="search_input"
        v-model="search"
      >
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
//data值
search:''

2. Obtenez toutes les données tableData du formulaire. Je ne vais pas le démontrer ici. Les données du formulaire de chacun sont différentes. Obtenez simplement les données du formulaire d'interface d'arrière-plan directement.

La source de données du formulaire obtenue par la liaison el-table, la signification ici est la suivante

1-Un filtre basé sur les critères de recherche une fois toutes les données du formulaire obtenues, filtre : filtre et renvoie un tableau, correspondant à la valeur d'attribut de liaison bidirectionnelle de la recherche et de l'entrée

2- Les conditions sont : la valeur d'entrée n'est pas vide, je peux rechercher en fonction de l'attribut name et de l'attribut module de tableData. toLowerCase() : convertit tous les nombres de la chaîne en minuscules. De cette façon, peu importe qu'il soit en majuscule ou en minuscule dans la zone de saisie, et il peut être recherché

data.name.toLowerCase().includes(search.toLowerCase()) : L'attribut name de tableData est converti en minuscules pour voir s'il contient la valeur après la conversion de la zone de saisie en minuscules, et s'il est inclus, retourne

@selection-change : case à cocher radio

@select-all : cochez toutes les cases

 <el-table
        :data="tableData.filter((data) =>!search ||
              data.name.toLowerCase().includes(search.toLowerCase()) ||
              data.module.toLowerCase().includes(search.toLowerCase())
          )"
        style="width: 100%"
        :height="height"
        @selection-change="handleselect"
        @select-all="changeall"
      >
        <el-table-column type="selection" width="55" prop="name"></el-table-column>
 <el-table-column type="selection" width="55" prop="module"></el-table-column>
</el-table>
//data数据
tableData:[]

Les cases à cocher et les cases à cocher simples doivent être transmises au backend sous la forme d'un tableau contenant l'ID de chaque ligne. La syntaxe est la suivante

changeall (selection) {
      this.delarr = []
var arr=[]
      arr = selection
      const length = arr.length
      for (let i = 0; i < length; i++) {
        this.delarr.push(arr[i].id)
      }
    },

obtenir [1,2,3,4]

Ceci est la fin de l'article, j'espère qu'il vous sera utile ~