vue 使用el-card 和el-table 组合

可以使用el-card和el-table组合来实现一个带有卡片样式的表格。具体实现方法如下：

<template>
  <el-card class="table-card">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          address: '北京市朝阳区'
        },
        {
          name: '李四',
          age: 22,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 30,
          address: '广州市天河区'
        }
      ]
    }
  }
}
</script>

<style>
.table-card {
  min-height: 100%;
  height: 100%;
}
</style>

上述代码中，我们首先使用el-card包裹el-table，然后在el-table中定义表格列，最后在样式中设置el-card的高度为100%以实现高度自适应。这样就可以实现一个带有卡片样式的表格。