Vue EasyUI 表格下拉框
表格下拉框( ComboGrid )把可编辑的文本框和下拉数据网络面板结合起来。
表格下拉框( ComboGrid )提供了选择某个项目的键盘导航支持。
属性列表
名称 |
数据类型 |
作用描述 |
默认值 |
value |
string, number, array |
字段值。 |
null |
data |
array |
要加载的数据。 |
[ ] |
valueField |
string |
绑定到此组件的底层数据值名称。 |
id |
textField |
string |
绑定到此组件的基础数据字段名。 |
text |
editable |
boolean |
定义用户是否可以直接在字段中键入文本。 |
false |
事件列表
名称 |
参数 |
作用描述 |
filterChange |
{filterValue} |
当过滤器值更改时触发。 |
注:
- 继承: ComboBase 。
使用方法
- 与表格列(GridColumn )创建表格下拉框( 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 )
名称 |
数据类型 |
作用描述 |
默认值 |
field |
string |
列字段名。 |
null |
title |
string |
列标题文本。 |
null |
width |
any |
列宽。 |
null |
rowspan |
number |
指示单元格占用多少行。 |
1 |
colspan |
number |
指示单元格应占用多少列。 |
1 |
sortable |
boolean |
为True时,允许对列进行排序。 |
false |
sorter |
Function |
自定义字段排序函数。 |
null |
editable |
boolean |
为True时,允许对列进行编辑。 |
false |
order |
string |
默认排序顺序只能是“asc(升序)”或“desc(降序)”。 |
asc |
frozen |
boolean |
指示是否为冻结列。 |
false |
align |
string |
指示如何对齐列数据。可选的值:'left', 'right', 'center'。 |
null |
halign |
string |
指示如何对齐列标题。可选的值:'left', 'right', 'center'。如果不指定, 标题对齐与通过“align”属性定义的数据对齐相同。 |
null |
expander |
boolean |
指示是否展开列。 |
false |
headerCls |
string |
标题样式类。 |
null |
headerStyle |
Object |
标题内联样式。 |
null |
cellCss |
string, Object, Function |
单元格CSS样式。值可以是样式类、内联样式或返回样式类或内联样式的自定义函数。 |
null |
filterable |
boolean |
是否可以筛选列。 |
true |
filterOperators |
string[ ] |
列上可用的筛选操作符。 |
[ ] |
名称 |
参数 |
作用描述 |
header |
none |
列标题槽。 |
名称 |
参数 |
作用描述 |
header |
column |
头作用域。 |
body, cell |
row,column,rowIndex |
主体作用域。 |
footer |
row,column,rowIndex |
页脚作用域。 |
注:
- 继承: None 。
表格列组( GridColumnGroup )
名称 |
数据类型 |
作用描述 |
默认值 |
frozen |
boolean |
是否冻结列组。 |
false |
align |
string |
列组对齐方式。可选的值:'left','right'。 |
left |
width |
number, string |
列组宽度。 |
null |
注:
继承: None 。