今天，在項(xiàng)目中遇到這樣一個(gè)效果，具體如下

布局

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

那么老板要什么效果呢？

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

問題分析

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

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

  否則，修改其中一個(gè)輸入框的v-model，就會(huì)影響其他的輸入框

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

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

嘗試

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

<el-table-column prop="product_number" label="服務(wù)費(fèi)率" 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ù)費(fèi)率
    tableTime:[]//table時(shí)間選擇器
});

之后給批量填充綁定點(diǎn)擊事件

因?yàn)?，批量填充要?strong>服務(wù)費(fèi)率或者推廣結(jié)束時(shí)間至少填寫一個(gè)!

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

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

接下來才是正題，

因?yàn)橹拔覀兘otable的輸入框綁定的是帶有當(dāng)前行數(shù)據(jù)id標(biāo)識(shí)的v-model

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

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

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

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

因?yàn)檫@時(shí)候遍歷出來的id值是數(shù)字，例如：8

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

這時(shí)，我想到，使用re'reactive去聲明，修改之后，果然，不報(bào)錯(cuò)了，

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

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

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

const productFormNew = toRef(productForm)

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

但是，效果依舊沒有實(shí)現(xiàn)，還是死驢不動(dòng)彈?。。?/p>

轉(zhuǎn)換思路

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

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

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

nextTick() 可以在狀態(tài)改變后立即使用，以等待 DOM 更新完成。你可以傳遞一個(gè)回調(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)聽值的更新，每次點(diǎ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)效果可以實(shí)現(xiàn)

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

但是，bug來了

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

出錯(cuò)原因：因?yàn)槲覍eatchEffect寫在了點(diǎn)擊事件里面 每次點(diǎn)擊之后，它才會(huì)開啟監(jiān)聽數(shù)據(jù)并賦值

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

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

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

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

這次

 <el-table-column prop="product_number" label="服務(wù)費(fèi)率" 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é)束時(shí)間" 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ù)組中的指定索引位置進(jìn)行綁定。即當(dāng)日期選擇器的值發(fā)生變化時(shí)，tableTime數(shù)組中對(duì)應(yīng)位置的值也會(huì)改變。

• :value="productForm.time"：將productForm對(duì)象中的time屬性的值作為日期選擇器的默認(rèn)值。

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

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

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

并且，在點(diǎn)擊事件里面修改如下：

const tableServiceRate = ref<string[]>([]);  // 設(shè)置表格的input
const tableTime = ref<Date[]>([]);  // 設(shè)置表格的time
const handleBatchFill = () => {
    if (productForm.serviceRate === '' && productForm.time === '') {
        ElMessage({
            type: 'warning',
            message: '服務(wù)費(fèi)率或者推廣結(jié)束時(shí)間至少填寫一個(gè)!',
        });
        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);
};

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

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

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

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