解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題

目錄 布局 問題分析 嘗試 轉(zhuǎn)換思路 繼續(xù)轉(zhuǎn)換思路 驚奇的發(fā)現(xiàn)效果可以實現(xiàn) 出錯原因：因為我將weatchEffect寫在了點擊事件里面 每次點擊之后，它才會開啟監(jiān)聽數(shù)據(jù)并賦值 繼續(xù)轉(zhuǎn)換思路

目錄

• 布局
• 問題分析
• 嘗試
• 轉(zhuǎn)換思路
• 繼續(xù)轉(zhuǎn)換思路
• 驚奇的發(fā)現(xiàn)效果可以實現(xiàn)
• 出錯原因：因為我將weatchEffect寫在了點擊事件里面 每次點擊之后，它才會開啟監(jiān)聽數(shù)據(jù)并賦值
• 繼續(xù)轉(zhuǎn)換思路

今天，在項目中遇到這樣一個效果，具體如下

布局

相信這個布局應(yīng)該不難，無非就是在表單中嵌套表格而已，代碼結(jié)構(gòu)我也發(fā)放在下面

那么老板要什么效果呢？

其實就是，當(dāng)你點擊批量填充的時候，將從form中收集到的服務(wù)費率和推廣結(jié)束時間填充到組件table對應(yīng)位置

問題分析

• 底部table的數(shù)據(jù)是請求得到的，或者是組件傳值得到的，我們具體也不知道有多少條。

  那么對應(yīng)的輸入框和時間選擇器顯然不可以綁定同一個v-model

  否則，修改其中一個輸入框的v-model，就會影響其他的輸入框

• 提交表單時，table里面的輸入框和時間選擇器依舊可以正常輸入和選擇

• 也就是說我既可以批量修改，也可以單獨修改，

嘗試

第一次嘗試的時候，我在table底下的輸入框和時間選擇器的v-model上分別在form表單的prop聲明上同時聲明了各自的v-model,并且獲取scope.row.id用于綁定每一行唯一的v-model,代碼如下：

<el-table-column prop="product_number" label="服務(wù)費率" width="200">
       <template #default="scope">
           <div>
              <el-input size="small" v-model="tableServiceRate[scope.row.id]" ></el-input>
           </div>
       </template>
</el-table-column>

綁定的v-model

interface IForm {
    serviceRate: String | null;
    time: Date;
    activeLink: string | null;
    phone: number;
    tableServiceRate: string[];
    tableTime: Date[];
}
const productForm = ref<IForm>({
    serviceRate: '',
    time: '',
    activeLink: '',
    phone: null,
    tableServiceRate:[]//服務(wù)費率
    tableTime:[]//table時間選擇器
});

之后給批量填充綁定點擊事件

因為，批量填充要求服務(wù)費率或者推廣結(jié)束時間至少填寫一個!

所以，我們先去做一個簡單的判斷，并且加上對應(yīng)的消息提示

// 批量填充
const handleBatchFill = () => {
    if (productForm.serviceRate === '' && productForm.time === '') {
        ElMessage({
            type: 'warning',
            message: '服務(wù)費率或者推廣結(jié)束時間至少填寫一個!',
        });
        return;
    } 
};

接下來才是正題，

因為之前我們給table的輸入框綁定的是帶有當(dāng)前行數(shù)據(jù)id標(biāo)識的v-model

這樣確保了每一行循環(huán)出來的輸入框的v-model的唯一性

所以這里，我們在點擊事件里，去循環(huán)table的數(shù)據(jù)，找到id,然后去table外部form表單項的輸入框的值，賦值給productForm.tableServiceRate這個數(shù)組里key為id值的項，

ProductSaleListData.forEach((item) => {
      productForm.tableServiceRate[item.id] = productForm.serviceRate;
      productForm.tableTime[item.id] = productForm.time;
 });

這時候出現(xiàn)一個報錯信息，它提示聲明的productForm.tableServiceRate數(shù)組里不能設(shè)置未定義的key id

因為這時候遍歷出來的id值是數(shù)字，例如：8

后面修改為字符串之后還是不行，

這時，我想到，使用re'reactive去聲明，修改之后，果然，不報錯了，

我刷新之后，發(fā)現(xiàn)，咦！為什么打印修改之后的數(shù)組，里面需要的值正常填進去了，但是，視圖沒有更新，一直處于空狀態(tài)，

后面了解到，在vue3中reactive有時會失去響應(yīng)，

基于此，我又將代碼修改如下：

const productFormNew = toRef(productForm)

后面再循環(huán)賦值時，使用toRef后的響應(yīng)式對象

但是，效果依舊沒有實現(xiàn)，還是死驢不動彈！！！

轉(zhuǎn)換思路

我們可以利用nextTick立即獲取組件更新后的值

全局 API：常規(guī) | Vue.js (vuejs.org)

官方解釋：當(dāng)你在 Vue 中更改響應(yīng)式狀態(tài)時，最終的 DOM 更新并不是同步生效的，而是由 Vue 將它們緩存在一個隊列中，直到下一個“tick”才一起執(zhí)行。這樣是為了確保每個組件無論發(fā)生多少狀態(tài)改變，都僅執(zhí)行一次更新。

nextTick() 可以在狀態(tài)改變后立即使用，以等待 DOM 更新完成。你可以傳遞一個回調(diào)函數(shù)作為參數(shù)，或者 await 返回的 Promise。

 ProductSaleListData.forEach((item) => {
      console.log(item.id);
      nextTick(() => {
          productForm.tableServiceRate[item.id] = productForm.serviceRate;
          productForm.tableTime[item.id] = productForm.time;
      });
    console.log(productForm.tableServiceRate, '-d-d-d-d--');
});

后面發(fā)現(xiàn)這里不應(yīng)該用nextTick
暈死~~~~

繼續(xù)轉(zhuǎn)換思路

我們可以使用?watchEffect監(jiān)聽值的更新，每次點擊都將form表單的輸入框的值賦給table

ProductSaleListData.forEach((item) => {
   console.log(item.id);
   watchEffect(() => {
        productForm.tableServiceRate[item.id] = productForm.serviceRate;
        productForm.tableTime[item.id] = productForm.time;
   });
   console.log(productForm.tableServiceRate, '-d-d-d-d--');
  });

驚奇的發(fā)現(xiàn)效果可以實現(xiàn)

我以為到此就可以結(jié)束了

但是，bug來了

實際效果是，當(dāng)我點擊批量填充后，table沒有變化，但是，當(dāng)我繼續(xù)點擊tablel里面的輸入框時，它才會將form的值更新到table項上

出錯原因：因為我將weatchEffect寫在了點擊事件里面 每次點擊之后，它才會開啟監(jiān)聽數(shù)據(jù)并賦值

那我將weatchEffect單獨提出來，在監(jiān)聽響應(yīng)式數(shù)據(jù)的變化，

呃，一切回到解放前，底部table又沒有了變化

繼續(xù)轉(zhuǎn)換思路

經(jīng)過，數(shù)次打磨，

這次

 <el-table-column prop="product_number" label="服務(wù)費率" width="200">
    <template #default="scope">
        <div>
           <el-input size="small" v-model="tableServiceRate[scope.$index]" :value="productForm.serviceRate"></el-input>
        </div>
    </template>
   </el-table-column>
<el-table-column prop="wait_delivery_num" label="推廣結(jié)束時間" width="264">
    <template #default="scope">
         <el-date-picker size="small" v-model="tableTime[scope.$index]" :value="productForm.time" style="width: 220px" type="date" />
     </template>
</el-table-column>

• v-model="tableTime[scope.$index]"：使用Vue.js的雙向數(shù)據(jù)綁定，將日期選擇器的值和tableTime數(shù)組中的指定索引位置進行綁定。即當(dāng)日期選擇器的值發(fā)生變化時，tableTime數(shù)組中對應(yīng)位置的值也會改變。

• :value="productForm.time"：將productForm對象中的time屬性的值作為日期選擇器的默認值。

• 然后，去把table輸入框綁定的v-modle的值從form里面提出來，單獨聲明ref的響應(yīng)式數(shù)據(jù)

• 利用內(nèi)部value的修改，去強制修改v-model的值

• 并且不再利用當(dāng)前行數(shù)據(jù)的id去做唯一性處理，而是利用當(dāng)前行的索引，

并且，在點擊事件里面修改如下：

const tableServiceRate = ref<string[]>([]);  // 設(shè)置表格的input
const tableTime = ref<Date[]>([]);  // 設(shè)置表格的time
const handleBatchFill = () => {
    if (productForm.serviceRate === '' && productForm.time === '') {
        ElMessage({
            type: 'warning',
            message: '服務(wù)費率或者推廣結(jié)束時間至少填寫一個!',
        });
        return;
    } else {
        if (productForm.serviceRate) {
            tableServiceRate.value = Array(ProductSaleListData.length).fill(productForm.serviceRate);
        }
        if (productForm.time) {
            tableTime.value = Array(ProductSaleListData.length).fill(productForm.time);
        }
    }
    console.log('批量填充', tableServiceRate.value);
};

將一個具有相同元素的數(shù)組賦值給名為tableServiceRate的變量。該數(shù)組的長度由ProductSaleListData數(shù)組的長度決定，并且每個元素的值都是productForm.serviceRate。

換句話說，如果ProductSaleListData數(shù)組長度為n，那么tableServiceRate數(shù)組將包含n個元素，每個元素的值都是productForm.serviceRate。這樣可以簡化對數(shù)組元素的賦值過程，使每個元素都具有相同的數(shù)值。

這樣，就完成了數(shù)據(jù)批量填充。

到此這篇關(guān)于解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題的文章就介紹到這了,更多相關(guān)vue3 from填充el-input,v-model不唯一內(nèi)容請搜索技圈網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持技圈網(wǎng)！