在Vue.js中，Element UI是一个流行的UI库，它提供了一系列组件用于数据展示。以下是Element UI中一些常用的数据展示组件及其简单用例：
- Table（表格）
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '赵小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}
}
}
</script>- List（列表）
<template>
<el-list :data="listData">
<template slot-scope="item">
<el-list-item>{{ item.value }}</el-list-item>
</template>
</el-list>
</template>
<script>
export default {
data() {
return {
listData: ['数据1', '数据2', '数据3']
}
}
}
</script>- Card（卡片）
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>卡片标题</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<div v-for="o in 4" :key="o" class="text item">
信息{{ o }}
</div>
</el-card>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>- Tree（树形控件）
<template>
<el-tree :data="treeData" :props="defaultProps"></el-tree>
</template>
<script>
export default {
data() {
return {
treeData: [
{ label: '一级 1', children: [{ label: '二级 1-1' }] },
{ label: '一级 2', children: [{ label: '二级 2-1' }, { label: '二级 2-2' }] }
],
defaultProps: {
children: 'children',
label: 'label'
}
}
}
}
</script>- Tag（标签）
<template>
<el-tag>标签</el-tag>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>- Badge（消息提示）
<template>
<el-badge :value="12" class="item">
<el-button size="small">按钮</el-button>
</el-badge>
</template>