這是我參與8月更文挑戰的第2天，活動詳情查看：8月更文挑戰前端

前端框架層出不窮，雖然說萬變不離其宗，但對於小白🤦🏻‍♂️來講上手也須要一個過程vue

對於剛工做的我🤡來講，第一次正式使用新框架，徹底靠本身摸索和百度，寫了一個多月，也總結了一點東西，有些小細節仍是值得記錄一下的，留個記念後端

真實的項目老是面臨着各類各樣的要求，沒有時間去學習，只有上來就幹，從實戰中學習是最好的方式。👏🏻👏🏻👏🏻api

第一次使用新框架，總會有一些磕磕絆絆，即便有API介紹，可是有的不上手還真搞不懂，因此從實戰中我也記錄了一些使用的方式數組

表格Table

指定展開子數據的字段

官網中，有這種子節點能夠展開的樹形操做，但只有子數據是children字段才能展開可是從後端返回，獲取的數據裏面，並無children這個字段前端框架

此時可使用childrenColumnName來指定子數據的字段名稱：markdown

從columns中控制顯示的數據

角色是一個數組,一我的能夠有多個角色,不使用插槽如何將多個角色名，顯示在一我的下面？antd

若是使用插槽，能夠利用 v-for 循環將名字便利出來，可是有一種更簡單的方式：框架

能夠在columns的角色字段裏，寫入customRender,customRender用於生成複雜數據的渲染函數，參數分別爲當前行的值，當前行數據，行索引函數

分頁器

我感受官網寫的介紹看不懂，因此我用本身的話記錄一下

先在表格的標籤裏定義這兩個字段：

:pagination="pagination" //pagination是一個對象
 @change="tableChange" //點擊進翻頁的方法
複製代碼

而後在 data裏定義 pagination 對象，並填充數據

total在獲取後臺數據的時候進行賦值，total是數據總條數

pagination:{ 
  total:0, 
  defaultPageSize:10, //默認一個表格展現幾條數據
  showTotal: total => 共 ${total} 條數據, 
  showSizeChanger:true, 
  pageSizeOptions: ['5', '10', '15', '20'], 
  onShowSizeChange:(current, pageSize)=>this.pageSize = pageSize 
 },
複製代碼

點擊進行翻頁：

this.fetch是獲取後臺數據的方法，而且傳入參數

tableChange(e){
  this.fetch({
    page:e.current,
    page_size:e.pageSize
  })
  console.log('切換了',e)
}

複製代碼

從fetch傳入翻頁的信息，第幾頁，一頁幾條數據，fetch獲取到數據後，就賦值給表格

點擊行，進行跳轉

須要在a-table裏設置customRow事件,和事件名

再在methods裏寫點擊事件

<a-table
  :columns="nextInterHead"
  :data-source="nextInterview"
  class="a-table"
  :pagination="false"
  :customRow="rowClick"
>

//methods裏寫,record就是點擊的當前行信息
 rowClick(record){
      return{
        on:{
          click:()=>{
            //邏輯代碼
            console.log("點擊了",record)
            this.$router.push({
              path: '/candidate/detail',
              query: { id: record.id },
            })
            
          }
        }
      }
    }
  },
複製代碼

表單Form

表單有Form何FormModel兩種類型，這兩種類型的賦值方式，修改數據方式也不一樣，詳細可參考文檔

自定義表單校驗

prop 與對應規則名字和$refs,要一致;校驗規則的函數要寫在data裏面；校驗規則名字要寫在data的return裏，並配置相關參數

<a-form-model-item ref="phone" label="手機號" prop="phone">
    <a-input placeholder="請填寫手機號" v-model="form.phone" @blur=" () => { $refs.phone.onFieldBlur(); } " />
</a-form-model-item>

//在數據裏寫
  data() {
    //校驗手機號
    let validatePhone = (rule, value, callback) => {
      let reg = /^1\d{10}$/ 
      if (value === '') {
        return callback(new Error('請輸入手機號'));
      }else if(!reg.test(value)){
        return callback(new Error('請輸入正確的手機號'));
      }
      callback()
    };
    //
    return {
        rules: {
            phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],
        },
    }
}


複製代碼

validator: 就是自定義校驗意思 validatePhone 就是自定義校驗規則的名字,是一個寫在data裏面,return上邊的方法

表單賦值報錯

You cannot set a form field before rendering a field associated with the value

使用 this.form.setFieldsValue 時,出現上述錯誤,這是個人代碼

緣由:1. this.form.setFieldsValue 傳值的時候只能是 form 中用到的參數,有多是賦值多了

是由於在DOM節點尚未渲染好，就已經賦值了

解決方法是:

使用定時器

級聯選擇器Cascader

自定義子字段名，value與label

級聯選擇器在看成城市選擇器的時候，省市縣，須要本身從接口中獲取數據，只用數據的字段爲chldren的時候，才能正常顯示市或縣可是有的時候，從後端獲取的接口數據字段並不和api匹配，因此可使用fieldNames指定字段名和數據名

能夠這樣進行配置

日期選擇器

自定義日期格式

顯示默認的時間 :要使用default-value和v-model搭配使用

format設置默認的日期格式

 <a-date-picker
  @change="onChangeTime"
  format="YYYY-MM-DD"
  :default-value="form.establish_time? moment(form.establish_time,'YYYY-MM-DD'):null"
  v-model="form.establish_time"
  placeholder="請選擇公司成立時間"
/>

import moment from 'moment';

  methods: {
    moment,
}
複製代碼

日期若是帶有時分秒,然後臺須要的日期格式只有年月日的話須要使用moment和format轉換日期格式

moment(date).format('YYYY-MM-DD')
複製代碼

可是在顯示原先選擇的日期時可能報錯:

解決方法: 賦值日期時，使用moment函數進行格式化一下 item.import_date爲日期

this.importTime = moment(item.import_date,'YYYY-MM-DD')
複製代碼

框架的學習很碎很雜，在此只記錄了一點點，還有很長的一段路要走

ant design vue 的實戰應用與部分總結