Obtenez les données du formulaire, filtrez les données du champ de recherche et modifiez l'état actuel

<template>
  <div>
    <!-- Statistiques de contenu-->
    <div class="container" v-if="tabIndex === 0">
      <span style="dispaly:inline-block; margin-right:20px "> Plateforme</span>
      <!-- Zone de recherche-->
      
      <el-select
        v-model="AppName"
        filterable
        clearable
        class="width188 mb16"
        size="medium"
        placeholder="Veuillez sélectionner une plateforme"
        @change = "selectOnchange"
      >
        <el-option
          v-for="(item, index) in AppList"
          :key="index"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <!-- <el-button
        size="medium"
        class="ml16 p10"
        icon="el-icon-search"
        type="primary"
        @click="seachaccount()"
      >
        搜索
      < /el-button> -->
      <!-- 表单 -->
      <el-table
        :data="list"
        height="calc(100vh - 270px )"
        stripe
        border
        style="width:100%"
        ref="multipleTable"
      >
        <el-table-column prop="rn" label="序号" width="180"> </el-table-column>
        <el-table-column prop="AppName" label="平台" width="180">
        </el-table-column>
        <el-table-column prop="Compte" label="平台账号" width="180">
        </el-table-column>
        <el-table-column prop="Accountface" label="封面" width=" 180">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.Accountface"
              style="largeur : 40px ; hauteur : 40px ; curseur :pointeur"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="Titre" label="标题" width="180">
        </el-table-column >
        <el-table-column prop="Count1" label="浏览量" width="180">
        </el-table-column>
        <el-table-column prop="CreateTime" label="发布时间" width ="180">
        </el-table-column>
        <el-table-column
          prop="Type"
          :formatter="formatType"
          label="类型"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="Extend1" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              plain
              @click="onShow(scope.row)"
              size="small"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 40, 60 , 80, 100]"
        :page-size.sync="rows"
        layout="total, tailles, précédent, pager, suivant, cavalier"
        :total="total"
        style="margin-top: 20px"
      >
      </el -pagination>
    </div>
  </div>
</template>

<script>
export default {   name : "Statistic",   props : {     tabIndex : {       type : [String, Number],       default : 0,     },   },   data() {     return {       list : [], //Form       AppName : "",       AppList : [], //       Total du nom de la plate-forme : 0, //Total       des lignes : 10, //10 données par page       : 1, //Page actuelle     };   },

  Mounted() {     // Données de la liste déroulante     this.getplatformList();     // Statistiques de contenu     this.getVWsfarticleList();

    
  },

  méthodes : {     selectOnchange() {       this.getVWsfarticleList();     },     handleSizeChange(val) {       console.log(`${val} éléments par page`);       this.rows = val;       this.getVWsfarticleList();     },     handleCurrentChange (val) {       console.log(`Page actuelle : ${val}`);       this.page = val;       this.getVWsfarticleList();     },     // Données de la liste déroulante     getplatformList() {       let data = {         strWhere : "" ,       };       this.$api.getplatformList(data).then((res) => {         // console.log(res);         this.AppList = res.data;





















      });
      // console.log("clic");
    },

    // Remarque
    // searchaccount() {     // console.log("submit!");     // this.getVWsfarticleList();     // },

    // Conversion de type
    formatType(row) {       return row.Type === "1" ? "Text" : row.Type === "2" ? "Video" : ""; }     ,

    // Afficher
    onShow(val) {       // console.log(val);       this.$emit("chakan", val);     },

    // Obtenez les statistiques de contenu
    getVWsfarticleList() {       let data = {         où : "", // Condition         de pagination : 1, // Si la pagination 1 est une         page de pagination : this.page, //         Lignes du numéro de page actuel : this.rows , / /nombre de lignes       };       if (this.AppName != "") {         data.wheres = "extend4=" + this.AppName;       }       this.$api.getVWsfarticleList(data).then((res) => {         console .log(res);         for (var i = 0; i < res.data.length; i++) {           res.data[i].CreateTime = this.getNowFormatDate(             res.data[i].CreateTime           );         }         this . liste = res.data;






      











        this.total = res.total;
        
      });

      // Le tableau défile jusqu'au début de la ligne
      this.$nextTick(() => {         this.$refs.multipleTable.bodyWrapper.scrollTop = 0;       });     },

    // demande
    getNowFormatDate(value) {       var CurrentDate = "";       var Année = valeur.getFullYear();       var Mois = valeur.getMonth() + 1;       var Jour = valeur.getDate();       var Heures = valeur.getHours();       var Minutes = value.getMinutes();       var MonthVal = Mois >= 10 ? Mois : "0" + Mois ;       var DayVal = Jour >= 10 ? Jour : "0" + Jour ;       var HoursVal = Heures >= 10 ? Heures : "0" + Heures ;       var MinutesVal = Minutes >= 10 ? Minutes : "0" + Minutes ;       CurrentDate =         Année +         "-" +         MonthVal +         "-" +         DayVal +         " " +

















        HoursVal +
        ":" +
        MinutesVal +
        ":00" ;
      renvoie la date actuelle ;
    },
  },
} ;
</script>

<style>
</style>