elementUI清空彈框中的表單資料

2021-09-26 13:42:02 字數 3620 閱讀 6960

官網:

補充:改變表頭顏色:

"tabledata" border style=

"width: 100%"

:header-cell-style=

"" v-loading=

"loading"

>

(1)官網中提供的重置方法:this.$refs['formname'].resetfields();(2)清空資料:this.$refs['formname'].clearvalidate();

(3)常用示例 :

"formdata"

:rules=

"rules" ref=

"formdata"

>if(

this

.$refs.formdata)

1. 此方法有效,但是如果開啟修改彈框後再新增,確認新增後會多乙個開啟彈框時的 id 字段。

//開啟彈框清空表單,並將資料儲存到彈框中的 addform 中

"dialogtitle"

:visible.sync=

"isdialog" width=

"620px" v-if=

"isdialog"

>

"true"

:model=

"addform"

:rules=

"rules" ref=

"addform" size=

"mini"

class

="mystyle" label-width=

"100px"

>

"模板名稱" prop=

"templatename"

>

"addform.templatename" placeholder=

"請輸入模板名稱"

class

="nobr"

>

<

/el-input>

<

/el-form-item>

"模板**" prop=

"templateurl"

>

"addform.templateurl" placeholder=

"請輸入模板**"

class

="nobr"

>

<

/el-input>

<

/el-form-item>

"模板簡介" prop=

"templatedesc"

>

"addform.templatedesc" required placeholder=

"請輸入模板簡介"

class

="nobr"

>

<

/el-input>

<

/el-form-item>

<

/el-form>

"footer"

class

="dialog-footer"

>

"isdialog=false"

class

="mystyle" size=

"mini"

>取 消<

/el-button>

"primary" @click=

"onsubmit()"

class

="mystyle" size=

"mini"

>確 定<

/el-button>

<

/div>

<

/el-dialog>

data()

, rules:],

templateurl:

, templatedesc:

}}},

methods:})

for(

let key in

this

.addform)

delete

this

.addform.id;

//修改彈框給this.addform新增的id欄位

= 0; //示例

this

.opendialogname = formname;

//賦值,提交時將用到該變數

this

.isdialog =

true;if

(formname ===

"addform"

)else

if(formname ===

"updateform"

)= data;

this

.addform =

;//這一步是將**中的資料賦值給繫結的addform}}

,//提交新增、修改

onsubmit()

elseif(

this

.opendialogname ===

'updateform')}

else})

;},}2. 刪除 json 中指定的某個字段:delete、splice、filter。

簡單說一下這3個的用法:

//delete

const employee =

;delete employee.firstname;

//splice

employee.

splice(0

,1);

//splice(指定位置(從0開始,指定位置包括自身), 刪除個數, 新增內容)

//filter

employee = employee.

filter

((e)

=>

)3.如果使用上述方法,還是不能清空表單(比如下拉框資料改變,但是頁面上不變),可以在彈框中加v-if語句,會有意想不到的結果哦。

"dialogtitle"

:visible.sync=

"isdialog" width=

"620px" v-if=

"isdialog"

>

<

/el-dialog>

4.當資料太少時,上面的解決方法顯得大材小用,可以直接賦初始值。

//將這段**用下面的**代替

this

.$nexttick((

)=>})

for(

let key in

this

.addform)

delete

this

.addform.id;

//將這段**用下面的**代替if(

this

.$refs.addform)

;this

.addform =

;

element ui中的穿梭框

在element ui中有乙個不常用但還是比較炫的乙個元件,就是穿梭框。他要實現的就是把左面的選中然後傳送到右面表示選中,或者右面的傳送到左面表示取消。首先我們看文件的話會得到基本的穿梭框 即 首先我們來分析一下,cities是放資料的地方,data是左邊資料,value2是右面的資料 首先會將ci...

Element UI的復合輸入框應用

工作需求 應用復合輸入框支援右側下拉選項 左側支援輸入 當左側輸入時候右側下拉清空 如下 html 請輸入應用鏈結 value datadetail.url class input width select style width 80 focus getvalue input changinput...

js 實現input框的全選和清空

可以直接複製就能用 背後有注釋,有看不懂的歡迎一起討論 doctype html en utf 8 viewport content width device width,initial scale 1.0 input標籤全選 title table th,td shuang dan style h...