Vue3+ElementUI中的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>
import { ref } from 'vue';
 
export default {
  setup() {
    const tableData = ref([
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      },
      // ...可以添加更多行数据
    ]);
 
    return {
      tableData
    };
  }
};
</script>

这个例子展示了如何在Vue 3和Element UI中使用el-table组件来展示一个简单的表格。tableData是一个响应式数据，可以在组件内部被修改，并且这些变化会自动反映到表格上。这个例子也展示了如何使用prop属性来指定每列要显示的对象属性。