1. 程式人生 > 實用技巧 >vue-ant-select:元件化開發中關於公用子元件後新增刪除編輯某項通知到父元件實時更新和預設default-select值為物件時注意點

vue-ant-select:元件化開發中關於公用子元件後新增刪除編輯某項通知到父元件實時更新和預設default-select值為物件時注意點

在使用ant-select時:如果option是物件的屬性

1:預設值可以自己設定但不能設定為物件

2:也不能設定為屬性值比如:default-value="selectData[0].file_name":這樣會每次選擇第一個或者預設第一個選擇時選不了選擇其它後再選擇第一個才可以

例如:

錯誤:<a-select :default-value="selectData[0].file_name" style="width:100%" @change="slectedchange">

正確:<a-select default-value="請選擇素材" style="width:100%" @change="slectedchange">

程式碼:

        <!-- 素材新增項 -->
        <p class="item">
            <span class="title">選擇素材:</span>
            <a-select :default-value="selectData[0].file_name" style="width:100%" @change="slectedchange">
            <!-- <a-select default-value="請選擇素材" style="width:100%" @change="slectedchange"> -->
              <a-select-option v-for
="(v,i) in this.selectData" :value="v.file_name" :key="i"> {{v.file_name}} </a-select-option> </a-select> </p> <!-- 手動新增素材 --> <p class="item"> <a-button size="small" @click="mediaAdd()">新增</a-button> </p>
            slectedchange(e){//select 選擇後
                console.log(e)//預設只能獲取字串而不是物件
                this.selectString = e
                this.selectData.map((v,i)=>{//手動匯入本選項名的obj
                    // console.log(v)
                    if(v.file_name == e){
                        this.selectObj = v
                    }
                })
            },
            //media素材選擇------------------------------------------------
            fnremoveMedia(v,i){//刪除指定項素材
                this.programDate.media.map((k,ind,arr)=>{
                    if(i==ind){
                        arr.splice(ind,1)
                    }
                })
            },
            mediaAdd(){//新增素材
                console.log(this.selectString,this.selectData)
                console.log(this.programDate.media)
                // this.programDate.media = this.selectData
                if(this.selectString.length==0){//如果沒有選擇時間不新增
                    return this.$message.warning('請選擇素材!')
                }
                //去重------------------------
                    let add=true
                    this.programDate.media.map((v,i)=>{
                        if(this.selectString === v.file_name){
                            console.log(v.file_name,this.selectString)
                            add=false
                            return this.$message.warning('您剛新增過,請不要重複新增素材!')
                        }
                    })
                    if(add){
                        // this.programDate.media.push(this.selectString)
                        console.log(this.programDate.media)
                        console.log(this.selectObj)
                        this.programDate.media.push(this.selectObj)
                    }
            },

另外因為刪除新增在編輯的浮框子元件內,而建立也共用了一個元件,區別是編輯的時候需要傳入額外的值尤其是key值以辨別在編輯哪一個列物件的資料。

            ifEditDataInit(){//如果是編輯進來的話資料顯示初始化----走編輯的彈框更改資料==============================================
                    this.programDate={//回到初始化無值狀態
                      key:this.editData?this.editData['節目'].key:'',//傳過來的key值key要保留如果是編輯
                      jiemuName:this.editData?this.editData['節目'].proname:'',//節目名稱-初始化父元件傳入的指定名
                      media:[],//素材
                      checkedBoxWeek:[],//星期幾選擇
                      checkedBoxMonth:[],//月份選擇
                      repeatChoseValue:1,//重複方式項
                      selectData:[],//素材
                      addcheckedDayArr:[],//新增時間-特別日
                      playerTimerArr:[],//播放時間 -選擇單獨時間區間-不帶日期
                      repeatDate:"每天",//新增重複時間-重複周,重複天或重複日
                    }//節目總項-物件-記憶體所填寫資料
                console.log(this.editData['節目'])
                // 素材格式化--後期換成介面後會新增介面的內容--先把資料上有的賦值過來
                // this.editData['專案'].media
                // this.programDate.media = this.editData['節目'].media
                this.programDate.media = this.editData['節目'].media//這裡會自動渲染到頁面因為資料一變化就會通知併發送到父元件
            },

說明:ifEditDataInit是由父元件內在update鉤子生命週期呼叫,每次子元件有改動都會通知父元件,父元件update監聽到資料變化就會呼叫此方法實現值的初始化到更新

注意:初始化如果去掉內部包含的key值就會找不到,從而不能更改指定的專案,比如點選第一項開啟彈框,編輯後會更改最後一項

最後一行是從父元件傳入的資料賦值到子元件要傳送到父元件資料this.programDate.media:因為每次開啟編輯對話方塊也會呼叫,這個時候會把父元件內media項傳給子元件在子元件內顯示出media的列表,還有一個好處是因為資料更新會變化,而this.programDate.media是直接最終傳入到父元件的所以父元件的列表也會隨子元件彈框編輯新增刪除素材而實時的更新列表