腳本之家服務器常用軟件

快捷導航

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

更新時間：2023年07月13日 10:23:54 作者：LinHan

這篇文章主要給大家介紹一下如何解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題，文中有相關的解決方法，通過代碼示例介紹的非常詳細,需要的朋友可以參考下

布局

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

那么老板要什么效果呢？

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

問題分析

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

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

否則，修改其中一個輸入框的v-model，就會影響其他的輸入框
提交表單時，table里面的輸入框和時間選擇器依舊可以正常輸入和選擇
也就是說我既可以批量修改，也可以單獨修改，

嘗試

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

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

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

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

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

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

接下來才是正題，

因為之前我們給table的輸入框綁定的是帶有當前行數(shù)據(jù)id標識的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ù)組里不能設置未定義的key id

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

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

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

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

后面了解到，在vue3中reactive有時會失去響應，

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

const productFormNew = toRef(productForm)

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

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

轉(zhuǎn)換思路

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

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

官方解釋：當你在 Vue 中更改響應式狀態(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)這里不應該用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來了

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

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

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

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

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

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

這次

 <el-table-column prop="product_number" label="服務費率" 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ù)組中的指定索引位置進行綁定。即當日期選擇器的值發(fā)生變化時，tableTime數(shù)組中對應位置的值也會改變。
:value="productForm.time"：將productForm對象中的time屬性的值作為日期選擇器的默認值。
然后，去把table輸入框綁定的v-modle的值從form里面提出來，單獨聲明ref的響應式數(shù)據(jù)
利用內(nèi)部value的修改，去強制修改v-model的值
并且不再利用當前行數(shù)據(jù)的id去做唯一性處理，而是利用當前行的索引，

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

const tableServiceRate = ref<string[]>([]);  // 設置表格的input
const tableTime = ref<Date[]>([]);  // 設置表格的time
const handleBatchFill = () => {
    if (productForm.serviceRate === '' && productForm.time === '') {
        ElMessage({
            type: 'warning',
            message: '服務費率或者推廣結(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ù)批量填充。

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

您可能感興趣的文章: