不知道怎么安裝d2admin的可以看一下這篇文章=》如何在本地環(huán)境中安裝并運(yùn)行DVAdmin。
今天項(xiàng)目有一個(gè)新需求,需要增加一個(gè)選項(xiàng),選項(xiàng)要求必須多選。眾所周知,element的選擇器Select 的value的數(shù)值必須一個(gè)數(shù)組,但是,后端要求必須是一個(gè)字符串,而且,請(qǐng)求表格的數(shù)據(jù)返回的數(shù)據(jù)中這一選項(xiàng)的內(nèi)容也是一個(gè)字符串,多選框的value數(shù)據(jù)類別不對(duì),導(dǎo)致了這一塊表格的內(nèi)容是個(gè)空。
這就需要我們?cè)谏蟼鞯胶笈_(tái)前和渲染表格的內(nèi)容前必須處理一下數(shù)據(jù)。
下面說一下實(shí)現(xiàn)思路。
首先我們配置好value和label,這個(gè)就是我們select的內(nèi)容。必須確認(rèn)好配置的字段是準(zhǔn)確的,否則就算處理好數(shù)據(jù)也不會(huì)顯示。
然后我們看下面兩種方法,這就是我們處理數(shù)據(jù)的關(guān)鍵,valueBuilder這個(gè)作用是獲得數(shù)據(jù)后,渲染表格前執(zhí)行的,row的內(nèi)容是循環(huán)表格data并返回一行行的數(shù)據(jù),每一行對(duì)應(yīng)一條,而valueResolve則是上傳后臺(tái)前可以對(duì)我們的數(shù)據(jù)做一些處理。
首先,我們看一下valueBuilder的代碼。
可以看到后端傳給我們的是數(shù)字類型的字符串,首先我們使用split將字符串拆分為子字符串?dāng)?shù)組,然后使用map循環(huán)返回一個(gè)數(shù)字組成的新數(shù)組,頁面正常顯示
然后我們?cè)倏匆幌聉alueResolve的代碼,我們使用toString()方法把數(shù)組變?yōu)樽址賯鹘o后端。
上傳正常。