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 。

Vue EasyUI 表格下拉框

属性列表

事件列表

使用方法

表格列 （ GridColumn ）

表格列组（ GridColumnGroup ）

表格列（ GridColumn ）