Vue EasyUI 表格下拉框

2020-06-24 11:43 更新

表格下拉框( ComboGrid )把可編輯的文本框和下拉數(shù)據(jù)網(wǎng)絡(luò)面板結(jié)合起來。 表格下拉框( ComboGrid )提供了選擇某個(gè)項(xiàng)目的鍵盤導(dǎo)航支持。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
value string, number, array 字段值。 null
data array 要加載的數(shù)據(jù)。 [ ]
valueField string 綁定到此組件的底層數(shù)據(jù)值名稱。 id
textField string 綁定到此組件的基礎(chǔ)數(shù)據(jù)字段名。 text
editable boolean 定義用戶是否可以直接在字段中鍵入文本。 false

事件列表

名稱 參數(shù) 作用描述
filterChange {filterValue} 當(dāng)過濾器值更改時(shí)觸發(fā)。

注:
- 繼承: ComboBase 。

使用方法

  • 與表格列(GridColumn )創(chuàng)建表格下拉框( ComboGrid )。

<ComboGrid
    valueField="itemid" 
    textField="name" 
    v-model="value"
    :data="data"
    :panelStyle="{width:'500px'}">
  <DataGrid slot="grid" :border="false">
    <GridColumn field="itemid" title="Item ID"></GridColumn>
    <GridColumn field="name" title="Name"></GridColumn>
    <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
    <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
    <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
    <GridColumn field="status" title="Status" align="center"></GridColumn>
  </DataGrid>
</ComboGrid>

表格列 ( GridColumn )

  • 屬性列表
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
field string 列字段名。 null
title string 列標(biāo)題文本。 null
width any 列寬。 null
rowspan number 指示單元格占用多少行。 1
colspan number 指示單元格應(yīng)占用多少列。 1
sortable boolean 為True時(shí),允許對(duì)列進(jìn)行排序。 false
sorter Function 自定義字段排序函數(shù)。 null
editable boolean 為True時(shí),允許對(duì)列進(jìn)行編輯。 false
order string 默認(rèn)排序順序只能是“asc(升序)”或“desc(降序)”。 asc
frozen boolean 指示是否為凍結(jié)列。 false
align string 指示如何對(duì)齊列數(shù)據(jù)??蛇x的值:'left', 'right', 'center'。 null
halign string 指示如何對(duì)齊列標(biāo)題??蛇x的值:'left', 'right', 'center'。如果不指定, 標(biāo)題對(duì)齊與通過“align”屬性定義的數(shù)據(jù)對(duì)齊相同。 null
expander boolean 指示是否展開列。 false
headerCls string 標(biāo)題樣式類。 null
headerStyle Object 標(biāo)題內(nèi)聯(lián)樣式。 null
cellCss string, Object, Function 單元格CSS樣式。值可以是樣式類、內(nèi)聯(lián)樣式或返回樣式類或內(nèi)聯(lián)樣式的自定義函數(shù)。 null
filterable boolean 是否可以篩選列。 true
filterOperators string[ ] 列上可用的篩選操作符。 [ ]

  • 插槽
名稱 參數(shù) 作用描述
header none 列標(biāo)題槽。

  • 作用域
名稱 參數(shù) 作用描述
header column 頭作用域。
body, cell row,column,rowIndex 主體作用域。
footer row,column,rowIndex 頁腳作用域。

注:
- 繼承: None 。

表格列組( GridColumnGroup )

  • 屬性列表
名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
frozen boolean 是否凍結(jié)列組。 false
align string 列組對(duì)齊方式??蛇x的值:'left','right'。 left
width number, string 列組寬度。 null

注:
繼承: None 。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)