解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題
今天，在項目中遇到這樣一個效果，具體如下
布局
相信這個布局應該不難，無非就是在表單中嵌套表格而已，代碼結構我也發放在下面
那么老板要什么效果呢？
其實就是，當你點擊批量填充的時候，將從form中收集到的服務費率和推廣結束時間填充到組件table對應位置
問題分析底部table的數據是請求得到的，或者是組件傳值得到的，我們具體也不知道有多少條。
那么對應的輸入框和時間選擇器顯然不可以綁定同一個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時間選擇器});之后給批量填充綁定點擊事件
因為，批量填充要求服務費率或者推廣結束時間至少填寫一個!
所以，我們先去做一個簡單的判斷，并且加上對應的消息提示
// 批量填充const handleBatchFill = () => { if (productForm.serviceRate === '' && productForm.time === '') {ElMessage({ type: 'warning', message: '服務費率或者推廣結束時間至少填寫一個!',});return; } };接下來才是正題，
因為之前我們給table的輸入框綁定的是帶有當前行數據id標識的v-model
這樣確保了每一行循環出來的輸入框的v-model的唯一性
所以這里，我們在點擊事件里，去循環table的數據，找到id,然后去table外部form表單項的輸入框的值，賦值給productForm.tableServiceRate這個數組里key為id值的項，
ProductSaleListData.forEach((item) => { productForm.tableServiceRate[item.id] = productForm.serviceRate; productForm.tableTime[item.id] = productForm.time; });這時候出現一個報錯信息，它提示聲明的productForm.tableServiceRate數組里不能設置未定義的key id
因為這時候遍歷出來的id值是數字，例如：8
后面修改為字符串之后還是不行，
這時，我想到，使用re'reactive去聲明，修改之后，果然，不報錯了，
我刷新之后，發現，咦！為什么打印修改之后的數組，里面需要的值正常填進去了，但是，視圖沒有更新，一直處于空狀態，
后面了解到，在vue3中reactive有時會失去響應，
基于此，我又將代碼修改如下：
const productFormNew = toRef(productForm)后面再循環賦值時，使用toRef后的響應式對象
但是，效果依舊沒有實現，還是死驢不動彈！！！
轉換思路我們可以利用nextTick立即獲取組件更新后的值
全局 API：常規 | Vue.js (vuejs.org)
官方解釋：當你在 Vue 中更改響應式狀態時，最終的 DOM 更新并不是同步生效的，而是由 Vue 將它們緩存在一個隊列中，直到下一個“tick”才一起執行。這樣是為了確保每個組件無論發生多少狀態改變，都僅執行一次更新。
nextTick() 可以在狀態改變后立即使用，以等待 DOM 更新完成。你可以傳遞一個回調函數作為參數，或者 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--');});后面發現這里不應該用nextTick暈死~~~~
繼續轉換思路我們可以使用 watchEffect監聽值的更新，每次點擊都將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--'); });驚奇的發現效果可以實現我以為到此就可以結束了
但是，bug來了
實際效果是，當我點擊批量填充后，table沒有變化，但是，當我繼續點擊tablel里面的輸入框時，它才會將form的值更新到table項上
出錯原因：因為我將weatchEffect寫在了點擊事件里面 每次點擊之后，它才會開啟監聽數據并賦值那我將weatchEffect單獨提出來，在監聽響應式數據的變化，
呃，一切回到解放前，底部table又沒有了變化
繼續轉換思路經過，數次打磨，
這次
v-model="tableTime[scope.$index]"：使用Vue.js的雙向數據綁定，將日期選擇器的值和tableTime數組中的指定索引位置進行綁定。即當日期選擇器的值發生變化時，tableTime數組中對應位置的值也會改變。
:value="productForm.time"：將productForm對象中的time屬性的值作為日期選擇器的默認值。
然后，去把table輸入框綁定的v-modle的值從form里面提出來，單獨聲明ref的響應式數據
利用內部value的修改，去強制修改v-model的值
并且不再利用當前行數據的id去做唯一性處理，而是利用當前行的索引，
并且，在點擊事件里面修改如下：
const tableServiceRate = ref<string[]>([]); // 設置表格的inputconst tableTime = ref<Date[]>([]); // 設置表格的timeconst handleBatchFill = () => { if (productForm.serviceRate === '' && productForm.time === '') {ElMessage({ type: 'warning', message: '服務費率或者推廣結束時間至少填寫一個!',});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);};將一個具有相同元素的數組賦值給名為tableServiceRate的變量。該數組的長度由ProductSaleListData數組的長度決定，并且每個元素的值都是productForm.serviceRate。
換句話說，如果ProductSaleListData數組長度為n，那么tableServiceRate數組將包含n個元素，每個元素的值都是productForm.serviceRate。這樣可以簡化對數組元素的賦值過程，使每個元素都具有相同的數值。
這樣，就完成了數據批量填充。
到此這篇關于解決vue3中from表單嵌套el-table時填充el-input,v-model不唯一問題的文章就介紹到這了,更多相關vue3 from填充el-input,v-model不唯一內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！
網公網安備