フロントエンド(実際の開発の概要)2

1.ElementUIでのフォーム検証の下のプロンプトテキスト

ここでは、ステップを1つ減らすだけでは不十分なようです。これに従って、このプロンプトを初めて記述してください。
ここに画像の説明を挿入

ここに画像の説明を挿入
ここに画像の説明を挿入
ここでのロジックは有効である必要があります。つまり、入力ボックスが空であり、空の値がfalseを返すかどうかを意味します。
ここに画像の説明を挿入

2.ElementUiのテーブルのtype = 'index'を取得します

この通常のscope.rowは使用できないため、追加で取得する必要があります。
ここに画像の説明を挿入

ここに画像の説明を挿入
ここに画像の説明を挿入

3.エラーが発生しました

TypeError:(void 0)は関数ではありません
この種のエラーは、送信要求は成功したがデータがないため、データがあるかどうかを判断し、判断して、プロンプトを表示する必要があります。

ここに画像の説明を挿入

4. vue + element-uiプロジェクトのページ付け、デフォルトのページ付け強調表示スタイルに戻る問題

ここでは、ページング効果を使用してインターフェイスにジャンプし、もう一度ジャンプするとインターフェイスは正しいように見えますが、強調表示されたコーナーマークは現在のページのフッターではなく、1です。確認したところ、私の理解では取得された総数は作成前です。totalNumの総数は作成時に取得されますが、ページングコンポーネントは変更されないため、ここでの解決策はvに従うことです-彼が言った場合、現在のページcurrentPageがここで取得されているため、ただし、totalNumの総数は0です。これで、currentPageの値がデータで変更され、総数が取得されるまで待機してから、このページバーが作成されます。とにかく、作成されます。それで問題は解決しました。
ここには別の感覚があります。それが正しいかどうかはわかりません。ジャンプして更新します。ストア内のデータの1つは消えず、もう1つは消えます。
ここに画像の説明を挿入

<!-- 这里解决了分页高亮为1的bug,使用v-if -->
<el-pagination @current-change="handleCurrent" :current-page.sync="currentPage" :page-size="pageSize"
layout="total,prev, pager, next, jumper" :total="totalCount" v-if="totalCount !== 0"></el-pagination>



  created: function () {
    
    
  //这里是从store中拉取的,别在意
    if (this.X_RECEIVABLES_CONDITION.CONDITION) {
    
    
      this.searchForm = this.X_RECEIVABLES_CONDITION.CONDITION;
      this.currentPage = this.X_RECEIVABLES_CONDITION.CURRENT_PAGE;
      console.log(this.currentPage)
    } else {
    
    
      this.currentPage = 1;
      console.log('222')
    }
    this.queryTable()
  },

  // 拉去数据  不写methods了
    queryTable () {
    
    
      let params = {
    
    
        SERVICE_ID: '15060',
        OTYPE: 1,
        TC_ID: Number(sessionStorage.getItem('companyId')),
        PAGESIZE: this.pageSize,
        PAGEINDEX: this.currentPage - 1
      }
      if (this.searchForm.status || this.searchForm.status === 0) {
    
    
        params.STATUS = this.searchForm.status
      }
      if (this.searchForm.type) {
    
    
        params.INCOME_TYPE = this.searchForm.type
      }
      http.post(params)
      .then(result => {
    
    
        if (result.length!==0) {
    
    
          this.totalCount = result[0].TOTAL
          this.tableData = result[1].list
          this.$store.dispatch("SET_X_RECEIVABLES_CONDITION", {
    
    
            CONDITION: this.searchForm,
            DATA: this.tableData,
            TOTAL_COUNT: this.totalCount,
            CURRENT_PAGE: this.currentPage
          })
        }else {
    
    
          this.$message.show({
    
    text: '暂无数据', type: 'success'})
          this.tableData = []
        }
      }).catch(error => {
    
    
        this.$message.show({
    
    text: error, type: 'error'})
      })
    },

おすすめ

転載: blog.csdn.net/weixin_46013619/article/details/105773781