Vue EasyUI 数据列表
属性列表
| 名称 |
数据类型 |
作用描述 |
默认值 |
| 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>