Knowledge learned from the water resources institute project

1. el-table Table rendering problems

When using slots to render table data obtained from the background, rendering cannot be performed .
The data I requested from the background is added to el-table Data source datalist in , however column It doesn't render to , because vue3.0 The document says , Add later data Medium vue Maintenance is not tracked .

2. vue slot

Look at the documents ,vue The documentation tutorial is very clear

A named slot

Scope slot

<a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">

  <span slot="action" slot-scope="text, record">
    <a @click="cameraEdit(record)">
      <a-icon type="form" /> edit </a>
    <a-divider type="vertical" />
    <a-popconfirm title=" Are you sure to delete ?" @confirm="() =>handleDelete(record.cameraId)">
      <a><a-icon type="delete" /> Delete </a>
    </a-popconfirm>
    <a-divider type="vertical" />
    <a @click="handleDetail(record)">
      <a-icon type="eye" /> preview </a>
  </span>
</a-table>

3. Arrow functions and promise（ES6）

In the above code @confirm="() =>handleDelete(record.cameraId)" Equivalent to
@confirm="function（）{
return handleDelete(record.cameraId)
}
What is the relationship between callback function and arrow function ？？？ Why not write it directly as @confirm=“handleDelete(record.cameraId)”,@click Isn't that what it says ？ But in the twinkling of an eye antd The example given is like this , It should be all right .

function fake() {
    
     getAction('/pm/project/queryListByName', {
     projectName: value })
       .then(res => {
    
         if (currentValue === value) {
    
           const result = res.result
           const data = []
           result.forEach(r => {
    
             data.push({
    
               value: r.projectName,
               text: r.projectName
             })
           })
           callback(data)
         }
       })
   }

Where the arrow function is equivalent to

 function fake() {
    
      getAction('/pm/project/queryListByName', {
     projectName: value })
        .then(function(res){
    
          if (currentValue === value) {
    
            const result = res.result
            const data = []
            result.forEach(r => {
    
              data.push({
    
                value: r.projectName,
                text: r.projectName
              })
            })
            callback(data)
          }
        })
    }

4.this.$http

It seems to be based on axios Packaged http Request plug-ins , Look not to understand ....

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import {
    
  clearLoginInfo
} from '@/utils'
import {
    
  Notification
} from 'element-ui'

const http = axios.create({
    
  timeout: 1000 * 30,
  withCredentials: true,
  headers: {
    
    'Content-Type': 'application/json; charset=utf-8'
  }
})

/** *  Request to intercept  */
http.interceptors.request.use(config => {
    
  config.headers['token'] = Vue.cookie.get('token') //  Ask for a headband token
  return config
}, error => {
    
  return Promise.reject(error)
})

/** *  The response to intercept  */
http.interceptors.response.use(response => {
    
  if (response.data && response.data.code === 401) {
     // 401, token invalid 
    Notification.close()
    Notification({
    
      title: ' Tips ',
      message: ' Login expired , Please login again ！',
      type: 'warning',
      duration: 3000
    })
    clearLoginInfo()
    router.push({
    
      name: 'login'
    })
  }
  if (response.data && response.data.code === 500) {
    
    Notification.close()
    Notification({
    
      title: ' Tips ',
      message: response.data.msg,
      type: 'error',
      duration: 3000
    })
  }
  return response
}, error => {
    
  return Promise.reject(error)
})

/** *  Request address processing  * @param {*} actionName action Method name  */
http.adornUrl = (actionName) => {
    
  //  Non-production environment  &&  Open agent ,  Interface prefixes are used uniformly [/proxyApi/] Prefix as proxy interception !
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

/** * get Request parameter processing  * @param {*} params  Parameter object  * @param {*} openDefultParams  Whether to turn on the default parameter ? */
http.adornParams = (params = {
     }, openDefultParams = true) => {
    
  var defaults = {
    
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}

/** * post Request data processing  * @param {*} data  Data objects  * @param {*} openDefultdata  Whether to turn on the default data ? * @param {*} contentType  data format  * json: 'application/json; charset=utf-8' * form: 'application/x-www-form-urlencoded; charset=utf-8' */
http.adornData = (data = {
    }, openDefultdata = true, contentType = 'json') => {
    
  var defaults = {
    
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

export default http