Vue EasyUI 数据列表
2020-06-24 11:50 更新
属性列表
名称 | 数据类型 | 作用描述 | 默认值 |
---|---|---|---|
data | array | 要加载的数据。 | [ ] |
itemCls | string | 数据项样式类。 | null |
itemStyle | Object | 数据项内联样式。 | null |
hoverCls | string | 当鼠标悬停在数据项样式类上时。 | datagrid-row-over |
selectedCls | string | 选择数据项时的样式类。 | datagrid-row-selected |
方法列表
名称 | 参数 | 返回值 | 作用描述 |
---|---|---|---|
navRow | step | void | 浏览行。 |
scrollToSelectedRow | none | void | 滚动到选中的行。 |
作用域
名称 | 参数 | 作用描述 |
---|---|---|
default | row,rowIndex | 行作用域。 |
注意:
- 继承: ListBase 。
使用方法
<DataList style="width:550px;height:250px"
:data="data"
selectionMode="single"
@selectionChange="selection=$event">
<template slot-scope="scope">
<div class="product f-row">
<img :src="getImage(scope.row)">
<div class="detail">
<p>{{scope.row.itemid}} - {{scope.row.name}}</p>
<p>{{scope.row.attr}}</p>
<p>List Price: {{scope.row.listprice}}</p>
</div>
</div>
</template>
</DataList>
以上内容是否对您有帮助:
更多建议: