實現element ui中table點選一行展開

2022-05-15 12:33:09 字數 2517 閱讀 2108

效果圖1、row-click 點選行

2、ref 自行了解vue

3、togglerowexpansion

togglerowexpansion() // 引數1是單擊行的row,引數2是true 或者false

<

template

>

<

el-table

:data

="tabledata5"

@row-click

="clicktable"

ref="reftable"

style

="width: 100%"

>

<

el-table-column

type

="expand"

>

<

template

slot-scope

="props"

>

<

el-form

label-position

="left"

inline class

="demo-table-expand"

>

<

el-form-item

label

="商品名稱"

>

<

span

>}

span

>

el-form-item

>

<

el-form-item

label

="所屬店鋪"

>

<

span

>}

span

>

el-form-item

>

<

el-form-item

label

="商品 id"

>

<

span

>}

span

>

el-form-item

>

<

el-form-item

label

="店鋪 id"

>

<

span

>}

span

>

el-form-item

>

<

el-form-item

label

="商品分類"

>

<

span

>}

span

>

el-form-item

>

<

el-form-item

label

="店鋪位址"

>

<

span

>}

span

>

el-form-item

>

<

el-form-item

label

="商品描述"

>

<

span

>}

span

>

el-form-item

>

el-form

>

template

>

el-table-column

>

<

el-table-column

label

="商品 id"

prop

="id"

>

el-table-column

>

<

el-table-column

label

="商品名稱"

prop

="name"

>

el-table-column

>

<

el-table-column

label

="描述"

prop

="desc"

>

el-table-column

>

el-table

>

template

>

<

style

>

.demo-table-expand

.demo-table-expand label

.demo-table-expand .el-form-item

style

>

<

script

>

export

default

, , , ]}},

methods:

}script

>

React中tab欄的實現

父元件的 展示 constructor props render this state 通過解構,下面直接拿到資料 return this.itemclick index titles 子元件 itemclick index this state const titles name console....

element ui實現前端分頁

element ui裡的分頁元件 size change handlesizechange current change handlecurrentchange current page page page sizes 20,50,100 background page size limit lay...

elementUI實現前端分頁

按照他的文件來寫分頁,最主要的是el table裡面展示的資料怎麼處理 最主要就是上面標紅這一塊的處理 allcommoditylist是後台取得資料,currentpage是當前頁,初始值0,pagesize當前需要展示的資料,初始值10 slice 方法從已有陣列中返回選定的資料 最主要就是上面...