Vue EasyUI 表格下拉框

2020-06-24 11:43 更新

表格下拉框( 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 。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号