技術文章 » 使用 Ant Design Vue 你可能會遇到的14個問題

使用 Ant Design Vue 你可能會遇到的14個問題

2023-10-22 15:02:08

公司有一個新需求，在原來專案基礎上開發，專案中使用 Ant Design Vue，版本是 1.X ,在此記錄下遇到的問題；對於沒有使用過或者使用程度不深的同學來說，希望可以幫助你在開發中遇到問題時有個參考。對於已經熟練使用的同學，可能這些問題都遇到過，歡迎大家在評論區補充。

1、實現對下拉框顯示的所有元素的搜尋,包括元素的label, value等等

新增 optionFilterprop = "children",並且下拉框的每條資料不能用標籤包裡,必須是純模板標籤

可以是:

<a-select option-filter-prop="children">
    <a-select-option 
        v-for-"item in countryList" 
        :key="item.biccode" 
        :value="item.biccode"
    > 
        {{item.cname}} | {{item.biccοde}}  <!-- 不能用標籤包裹 -->
    </a-select-option> 
</a-select>

如果需要用標籤包裹，則需要搭配 :filter-option 屬性

<a-select 
    option-filter-prop="children"
    :filter-option="filterOption"
>
    <a-select-option 
        v-for-"item in countryList" 
        :key="item.biccode" 
        :value="item.biccode"
    > 
        <span>{{item.cname}} | {{item.biccοde}}</span>
    </a-select-option> 
</a-select>

filterOption(input, option) {
    // option.componentOptions.children[0].elm.innerText,需要保證這一段取到選中資料的 innerText
    return (option.componentoptions.chi1dren[0].elm.innerText.toLowerCase().indexof(input.toLowerCase())>= 0);
}

2、表單項的 change 函數呼叫 this.form.getFieldError('欄位名') 拿到的是上次呼叫的校驗結果，不是實時岀觀的校驗

changeEquiRmbAmt(e,str){
    this.form.validateFields(['field1'], (errors, values) => { 
        console. 1og(errors) //這裡拿到的是上次校驗的結果
    });
}

解決方式一：加 setTimeout,感覺不太好（this.$nextTick()不生效）

changeEquiRmbAmt(e,str){
    setTimeout(() =>{
        this.form.validateFields(['field1'], (errors, values) => { 
            console. 1og(errors) //這裡拿到的是最新校驗的結果
        });
    },10)
}

解決方式二：在自定義校驗器 validator 中新增回撥，當欄位校驗發生錯誤後觸發回撥。


<a-input 
    v-decorator="[ 'price', {
        rules: [{ validator: checkPrice }], 
    }]" 
/>

// mixins.js
checkPrice(rule, value, callback) {
    if (value.number > 0) { 
        callback(); 
        return; 
    } 
    callback('發生錯誤');
    this.$emit('sendError',rule) //觸發回撥
}

// 頁面中監聽 sendError
this.$on('sendError',(rule) =>{
    if(rule.field==='price'){
         執行操作
    }
})

3、v-decorator 模式下無法使用 computed

當一個欄位的顯示隱藏，依賴多個欄位的綜合結果時，通常使用 computed ；但在v-decorator 模式下無法使用類似 v-if="this.form.value1" 的寫法，只能使用 this.form.getFieldValue('value1')；並且在計畫頁面有很多這種場景的時候，不能使用 computed 就難受了；

所以這裡可以定義一個物件和 this.form 一樣的 this.cloneForm

onValuesChange(props,values){
    if(values){
        for (const key in values){
            if(values.hasOwnProperty(key)){
                if(!this.cloneFonm.hasOwnProperty(key) || this.cloneForm[key]!==values[key]){
                    this.$set(this.cloneForm,key,values[key])
                }
            }    
        }
        // console.log(this.cloneForm)
    }
}

這樣當 form 的表單項任意值改變時，cloneForm 都能及時改變，相應的在 computed 裡面也能使用 this.cloneForm

4、tabs分頁切換系結值 activekey 變了,但沒有切換過來

使用 activeKey 代替 defaultActivekеу

<a-tabs :defaultActivekеу="activeKey">
</a-tabs>

改為

<a-tabs :activeKey="activeKey">
</a-tabs>

5、輸入框中輸入時卡頓

給表單增加 selfUpdate 屬性

<a-form :form="form" :selfUpdate="true"></a-form>

若表單中某個元件輸入依舊卡頓，則可以將該元件提取出來，單獨用另外的 form 包裝；

6、表單校驗時，控制檯有顯示 async-validator 返回的錯誤資訊，但欄位上沒有標紅，也沒有顯示錯誤提示

在發現模板中繫結沒有什麼問題的話，可以檢查下自定義校驗函數的邏輯，可能有兩種情況

  • 校驗函數中沒有順利走到 callback()
  • 校驗函數順利走到 callback()，但後續執行程式碼發生錯誤，沒有丟擲錯誤

如果在自定義校驗函數中存在語法錯誤，ant-design-vue 貌似預設不會丟擲；此時可以用 try catch 檢查下是否發生了錯誤。

比如下面的程式碼執行後就有問題，沒有在 callback('請輸入') 執行後 return，繼續往下執行，導致所校驗欄位不會標紅

const check = (rule, value, callback) => {
    if ([undefined,'',null].includes(value)) {
        callback('請輸入')
        // return ,如果希望此時校驗結束，則需要新增 return
    }
    callback()
};

而且，還需要注意的是，一個表單中繫結了多個自定義校驗函數的話，其中一個自定義校驗函數有邏輯錯誤，則該表單中其他欄位在執行自定義校驗的時候也不會標紅；

7、Invalid prop: custom validator check failed for prop 「fileList「

有個場景是：上傳檔案後，檢視詳情，將詳情的資料賦值給 fileList

arr.forEach((item) =>{
    item.name = item.fileName
})
this.fileList = arr

此時報錯了，原因是 fileList 未獲取到對應的資料型別的資料，需要將 uid 和 status 加上

arr.forEach((item) =>{
    item.name = item.fileName
    item.uid = item.uid
    item.status = item.status
})
this.fileList = arr

8、cannot set a form field before rendering a field associated with the value

在呈現與值關聯的欄位之前，無法設定表單欄位

  • 第一反應是新增 this.$nextTick() ，但。。無效
  • formItem 上新增 key，無效
  • formItem 上新增 selfUpdate，無效
  • 新增 setTimeout ，有效。。

難道就是渲染慢？

9、表格列設定寬度無效

以下設定無效

:scroll{x:120%}
:scroll{x:'1000'}

以下設定有效

:scroll{x:'1000px'}
:scroll{x:1000}
:scroll{x:'120%'}

10、表單使用v-decorator模式，點選label 輸入框聚焦問題解決方案

在 a-form-item 標籤上新增和 v-decorator 繫結的欄位名不一樣的 id

<a-form-item
    label="Note"
    id="noteId" // 新增和 v-decorator 繫結的欄位名不一樣的 id
> 
    <a-input v-decorator="['note', { rules: [{ required: true, message: 'Please' }] }]" /> 
</a-form-item>

11、table表格選中項的清除問題

在 rowSelection 中需要將 selectedRowKeys 返回

<template>
    <a-table
      ref="table"
      :row-selection="rowSelection"
      :pagination="false"
      bordered
      :rowKey="(record, index) => { return index }">
    </a-table>
</template>
<script>
  data(){
    return{
      selectedRows: [],
      selectedRowKeys: [],
    }
  },
  computed:{
    rowSelection(){
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys, // 需要加上這一行，清除才會有作用
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows
        },
      }
    },
  },
</script>

12、呼叫表單清空方法後，Select元件的placeholder不顯示的問題

表單清空方法中需設定值為 undefined，不能是空字串

this.form.setFields({'feePay':{value:undefined,error:null}})

13、a-affix 固釘元件，寬度未隨父容器寬度變化

設定 <a-affix> 寬度 100%

<Affix :style="{ width: '100%' }" :offset-top="10"></Affix>

14、編輯表格資料時，在輸入框輸入一個字元后，輸入框立馬失去焦點了，導致不能正常的連續輸入字元

輸入框所在列的 dateIndex 設定的是 remitMemo，remitMemo 具有唯一性。所以給表格的 rowKey 設定的也是 remitMemo，這裡修改 rowKey 為其他具有唯一性的欄位即可......

// 輸入框的設定資料
{
  title: 'remitMemo',
  dataIndex: 'remitMemo',
  width: '30%',
  scopedSlots: { customRender: 'remitMemo' },
}

// 改為其他具有唯一性的欄位
<a-table rowKey="remitMemo">  =>  <a-table rowKey="uid">

總結

目前做的這個專案體量不算太大，但也遇到了很多問題，上面記錄了和 antDesignVue 相關的14個問題。各位大佬有不同意見或者遇到過其他問題的可以在評論區補充；