Vue EasyUI是一個基于Vue.js的前端UI組件庫，提供了許多常見的UI組件和交互功能，使得開發者可以快速構建可視化界面。

以下是一個簡單的代碼示例，使用了Vue EasyUI的datagrid組件來展現一個商品列表：

<template>
<div>
<eu-datagrid
:data="products"
style="height: 300px;"
:columns="[
{field: 'name', title: '商品名稱'},
{field: 'price', title: '價格'},
{field: 'quantity', title: '數量'}
]"
:pagination="true">
</eu-datagrid>
</div>
</template>
<script>
export default {
name: 'ProductList',
data() {
return {
products: [
{name: '商品1', price: 100, quantity: 10},
{name: '商品2', price: 200, quantity: 5},
{name: '商品3', price: 300, quantity: 3},
{name: '商品4', price: 400, quantity: 2}
]
};
},
created() {}
};
</script>

以上代碼中，<eu-datagrid>是Vue EasyUI中的一種組件，它用于展現一個可排序、可搜索、可分頁的數據列表。

在<eu-datagrid>組件中，我們使用了三個屬性：

• :data：表示需要展現的數據，它可以是一個數組或一個后端API地址。
• :columns：表示需要展現的列，它是一個數組，每個元素都表示一列的屬性。
• :pagination：表示是否需要分頁功能，它可以是布爾值或一個對象，用于指定分頁的參數。

最終的效果如下圖所示：