Vue EasyUI 數(shù)據(jù)表格

2020-06-24 11:51 更新

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
idField string 指示哪個字段是標(biāo)識字段。 null
groupField string 指示要分組的字段。 null
expanderWidth number 展開列寬。 30

事件列表

名稱 參數(shù) 作用描述
rowExpand row 在展開行時觸發(fā)。
rowCollapse row 當(dāng)行被折疊時觸發(fā)。
groupExpand value,  rows,  collapsed 在展開組時觸發(fā)。
groupCollapse value,  rows,  collapsed 在組折疊時觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
sortData none void 對數(shù)據(jù)行進(jìn)行排序。
collapseGroup value void 一組折疊。。
expandGroup value void 擴(kuò)展一組。
toggleGroup value void 一組切換。
collapseRow row void 折疊一行。
expandRow row void 擴(kuò)充一行。
toggleRow row void 連續(xù)切換。

注:
- 繼承: GridBase 。

使用方法

  • 與表格列( gridcolumn )配合創(chuàng)建數(shù)據(jù)表格(datagrid)。

<DataGrid :data="data" style="width:600px;height:250px">
    <GridColumn field="itemid" title="Item ID" :frozen="true"></GridColumn>
    <GridColumn field="name" title="Name" :frozen="true"></GridColumn>
    <GridColumn field="listprice" title="List Price" align="right" width="100"></GridColumn>
    <GridColumn field="unitcost" title="Unit Cost" align="right" width="100"></GridColumn>
    <GridColumn field="attr" title="Attribute" width="200"></GridColumn>
    <GridColumn field="status" title="Status" width="100"></GridColumn>
</DataGrid>
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號