Front end (summary of actual development) 2

1. Prompt text below form validation in ElementUI

It seems that one less step is not enough here, just follow this and write this prompt for the first time,
Insert picture description here

Insert picture description here
Insert picture description here
The logic here should be valid, which means whether the input box is empty, and the empty value returns false.
Insert picture description here

2. Get the type='index' of the table in ElementUi

This ordinary scope.row is not available and needs to be obtained additionally.
Insert picture description here

Insert picture description here
Insert picture description here

3. Error encountered

TypeError: (void 0) is not a function
This kind of error is that the sending request is successful, but there is no data, so you need to judge whether there is data, judge it, and give a prompt, length then

Insert picture description here

4. The pagination of vue+element-ui project, the problem of returning to the default pagination highlighting style

Here appears to use the paging effect, jump to the interface, and the interface is correct when you jump back again, but the highlighted corner mark is not the footer of the current page, it is 1. After checking it, my understanding is that the total number is obtained before the created , Although the total number of totalNum is obtained when created, the paging component will not change, so my solution here is to follow the v-if he said, because the current page currentPage has been obtained here, but the total number of totalNum is 0 That's it, the value of currentPage has been modified in the data, we wait until the total number is pulled, and then create this page bar, anyway, it is pulled in created. So the problem was solved.
There is another feeling here, I don’t know if it’s right, jump and refresh, one of the data in the store will not disappear, the other will disappear.
Insert picture description here

<!-- 这里解决了分页高亮为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'})
      })
    },

Guess you like

Origin blog.csdn.net/weixin_46013619/article/details/105773781