公司有一個(gè)新需求，在原來項(xiàng)目基礎(chǔ)上開發(fā)，項(xiàng)目中使用 Ant Design Vue，版本是 1.X ,在此記錄下遇到的問題；對(duì)于沒有使用過或者使用程度不深的同學(xué)來說，希望可以幫助你在開發(fā)中遇到問題時(shí)有個(gè)參考。對(duì)于已經(jīng)熟練使用的同學(xué)，可能這些問題都遇到過，歡迎大家在評(píng)論區(qū)補(bǔ)充。

1、實(shí)現(xiàn)對(duì)下拉框顯示的所有元素的搜索,包括元素的label, value等等

添加 optionFilterprop = "children",并且下拉框的每條數(shù)據(jù)不能用標(biāo)簽包裏,必須是純模板標(biāo)簽

可以是:

<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}}  <!-- 不能用標(biāo)簽包裹 -->
    </a-select-option> 
</a-select>

如果需要用標(biāo)簽包裹，則需要搭配 :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,需要保證這一段取到選中數(shù)據(jù)的 innerText
    return (option.componentoptions.chi1dren[0].elm.innerText.toLowerCase().indexof(input.toLowerCase())>= 0);
}

2、表單項(xiàng)的 change 函數(shù)調(diào)用 this.form.getFieldError('字段名') 拿到的是上次調(diào)用的校驗(yàn)結(jié)果，不是實(shí)時(shí)岀觀的校驗(yàn)

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

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

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

解決方式二：在自定義校驗(yàn)器 validator 中添加回調(diào)，當(dāng)欄位校驗(yàn)發(fā)生錯(cuò)誤后觸發(fā)回調(diào)。

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

// mixins.js
checkPrice(rule, value, callback) {
    if (value.number > 0) { 
        callback(); 
        return; 
    } 
    callback('發(fā)生錯(cuò)誤');
    this.$emit('sendError',rule) //觸發(fā)回調(diào)
}

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

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

當(dāng)一個(gè)欄位的顯示隱藏，依賴多個(gè)欄位的綜合結(jié)果時(shí)，通常使用 computed ；但在v-decorator 模式下無法使用類似 v-if="this.form.value1" 的寫法，只能使用 this.form.getFieldValue('value1')；并且在項(xiàng)目頁面有很多這種場景的時(shí)候，不能使用 computed 就難受了；

所以這里可以定義一個(gè)對(duì)象和 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)
    }
}

這樣當(dāng) form 的表單項(xiàng)任意值改變時(shí)，cloneForm 都能及時(shí)改變，相應(yīng)的在 computed 里面也能使用 this.cloneForm

4、tabs標(biāo)簽頁切換綁定值 activekey 變了,但沒有切換過來

使用 activeKey 代替 defaultActivekеу

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

改為

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

5、輸入框中輸入時(shí)卡頓

給表單增加 selfUpdate 屬性

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

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

6、表單校驗(yàn)時(shí)，控制臺(tái)有顯示 async-validator 返回的錯(cuò)誤信息，但欄位上沒有標(biāo)紅，也沒有顯示錯(cuò)誤提示

在發(fā)現(xiàn)模板中綁定沒有什么問題的話，可以檢查下自定義校驗(yàn)函數(shù)的邏輯，可能有兩種情況

• 校驗(yàn)函數(shù)中沒有順利走到 callback()
• 校驗(yàn)函數(shù)順利走到 callback()，但后續(xù)執(zhí)行代碼發(fā)生錯(cuò)誤，沒有拋出錯(cuò)誤

如果在自定義校驗(yàn)函數(shù)中存在語法錯(cuò)誤，ant-design-vue 貌似默認(rèn)不會(huì)拋出；此時(shí)可以用 try catch 檢查下是否發(fā)生了錯(cuò)誤。

比如下面的代碼執(zhí)行后就有問題，沒有在 callback('請(qǐng)輸入') 執(zhí)行后 return，繼續(xù)往下執(zhí)行，導(dǎo)致所校驗(yàn)欄位不會(huì)標(biāo)紅

const check = (rule, value, callback) => {
    if ([undefined,'',null].includes(value)) {
        callback('請(qǐng)輸入')
        // return ,如果希望此時(shí)校驗(yàn)結(jié)束，則需要添加 return
    }
    callback()
};

而且，還需要注意的是，一個(gè)表單中綁定了多個(gè)自定義校驗(yàn)函數(shù)的話，其中一個(gè)自定義校驗(yàn)函數(shù)有邏輯錯(cuò)誤，則該表單中其他欄位在執(zhí)行自定義校驗(yàn)的時(shí)候也不會(huì)標(biāo)紅；

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

有個(gè)場景是：上傳文件后，查看詳情，將詳情的數(shù)據(jù)賦值給 fileList

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

此時(shí)報(bào)錯(cuò)了，原因是 fileList 未獲取到對(duì)應(yīng)的數(shù)據(jù)類型的數(shù)據(jù)，需要將 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

在呈現(xiàn)與值關(guān)聯(lián)的字段之前，無法設(shè)置表單字段

• 第一反應(yīng)是添加 this.$nextTick() ，但。。無效
• formItem 上添加 key，無效
• formItem 上添加 selfUpdate，無效
• 添加 setTimeout ，有效。。

難道就是渲染慢？

9、表格列設(shè)置寬度無效

以下設(shè)置無效

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

以下設(shè)置有效

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

10、表單使用v-decorator模式，點(diǎn)擊label 輸入框聚焦問題解決方案

在 a-form-item 標(biāo)簽上添加和 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表格選中項(xiàng)的清除問題

在 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, // 需要加上這一行，清除才會(huì)有作用
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows
        },
      }
    },
  },
</script>

12、調(diào)用表單清空方法后，Select組件的placeholder不顯示的問題

表單清空方法中需設(shè)置值為 undefined，不能是空字符串

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

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

設(shè)置 <a-affix> 寬度 100%

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

14、編輯表格數(shù)據(jù)時(shí)，在輸入框輸入一個(gè)字符后，輸入框立馬失去焦點(diǎn)了，導(dǎo)致不能正常的連續(xù)輸入字符

輸入框所在列的 dateIndex 設(shè)置的是 remitMemo，remitMemo 具有唯一性。所以給表格的 rowKey 設(shè)置的也是 remitMemo，這里修改 rowKey 為其他具有唯一性的字段即可......

// 輸入框的配置數(shù)據(jù)
{
  title: 'remitMemo',
  dataIndex: 'remitMemo',
  width: '30%',
  scopedSlots: { customRender: 'remitMemo' },
}

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

總結(jié)

目前做的這個(gè)項(xiàng)目體量不算太大，但也遇到了很多問題，上面記錄了和 antDesignVue 相關(guān)的14個(gè)問題。各位大佬有不同意見或者遇到過其他問題的可以在評(píng)論區(qū)補(bǔ)充；文章來源地址http://www.zghlxwxcb.cn/news/detail-710966.html

到了這里，關(guān)于使用 Ant Design Vue 你可能會(huì)遇到的14個(gè)問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！