【Element入门】Element UI 数据展示组件详解

在Vue.js中，Element UI是一个流行的UI库，它提供了一系列组件用于数据展示。以下是Element UI中一些常用的数据展示组件及其简单用例：

1. 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>

2. 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>

3. 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>

4. 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>

5. Tag（标签）

<template>
  <el-tag>标签</el-tag>
</template>
 
<script>
export default {
  data() {
    return {
    }
  }
}
</script>

6. Badge（消息提示）

<template>
  <el-badge :value="12" class="item">
    <el-button size="small">按钮</el-button>
  </el-badge>
</template>