水利院项目学到的知识

1. el-table表格渲染问题

使用插槽对从后台获取的表格数据进行渲染时出现不能渲染的情况。
我从后台请求到的数据加入到el-table的数据源datalist中，但是column并没有渲染到，因为vue3.0文档中写了，后面加入data中的vue是不追踪维护的。

2. vue插槽

看文档吧，vue文档教程很清楚

具名插槽

作用域插槽

<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" />编辑</a>
    <a-divider type="vertical" />
    <a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.cameraId)">
      <a><a-icon type="delete" />删除</a>
    </a-popconfirm>
    <a-divider type="vertical" />
    <a @click="handleDetail(record)">
      <a-icon type="eye" />预览</a>
  </span>
</a-table>

3.箭头函数和promise（ES6）

上面代码中@confirm="() =>handleDelete(record.cameraId)"等价于
@confirm="function（）{
return handleDelete(record.cameraId)
}
回调函数和箭头函数有什么关系？？？为啥不直接写成@confirm=“handleDelete(record.cameraId)”，@click不就是这样写的吗？但是转眼看见antd给的示例就是这样的，应该都行吧。

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)
         }
       })
   }

其中箭头函数相当于

 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

好像是基于axios 封装的http请求插件，看不懂。。。。

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'
  }
})

/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
  return config
}, error => {
  return Promise.reject(error)
})

/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
  if (response.data && response.data.code === 401) { // 401, token失效
    Notification.close()
    Notification({
      title: '提示',
      message: '登录已过期，请重新登录！',
      type: 'warning',
      duration: 3000
    })
    clearLoginInfo()
    router.push({
      name: 'login'
    })
  }
  if (response.data && response.data.code === 500) {
    Notification.close()
    Notification({
      title: '提示',
      message: response.data.msg,
      type: 'error',
      duration: 3000
    })
  }
  return response
}, error => {
  return Promise.reject(error)
})

/**
 * 请求地址处理
 * @param {*} actionName action方法名称
 */
http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

/**
 * get请求参数处理
 * @param {*} params 参数对象
 * @param {*} openDefultParams 是否开启默认参数?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}

/**
 * post请求数据处理
 * @param {*} data 数据对象
 * @param {*} openDefultdata 是否开启默认数据?
 * @param {*} contentType 数据格式
 *  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