閱讀(2.6k) 書簽贊(0) 我要糾錯

Vue EasyUI 表格下拉框

2020-06-24 11:43 更新

表格下拉框（ ComboGrid ）把可編輯的文本框和下拉數(shù)據(jù)網(wǎng)絡(luò)面板結(jié)合起來。表格下拉框（ ComboGrid ）提供了選擇某個項目的鍵盤導(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)過濾器值更改時觸發(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時,允許對列進(jìn)行排序。	false
sorter	Function	自定義字段排序函數(shù)。	null
editable	boolean	為True時,允許對列進(jìn)行編輯。	false
order	string	默認(rèn)排序順序只能是“asc(升序)”或“desc(降序)”。	asc
frozen	boolean	指示是否為凍結(jié)列。	false
align	string	指示如何對齊列數(shù)據(jù)?？蛇x的值:'left', 'right', 'center'。	null
halign	string	指示如何對齊列標(biāo)題?？蛇x的值:'left', 'right', 'center'。如果不指定, 標(biāo)題對齊與通過“align”屬性定義的數(shù)據(jù)對齊相同。	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[ ]	列上可用的篩選操作符。	[ ]