table组件

Flement Plus组件库提供了Table组件，用于展示多条结构类似的数据，例如工资表涯程表和计划表等，可以对数据进行排序、筛选、对比或其他自定义操作。
Table 组件使用<el-table>标签定义，在该标签中绑定 data对象数组后，在el-table-column>中使用prop属性对应对象中的键名，即可将数据添加到表格中；使用label属性可以定义表格的列名，使用width属性可以定义表格的宽度。

① 创建srelcomponents\Table.vue文件，具体代码如下。
<template>
<el-table :data="tableData" stripe border style="width: 100%">
禁用按钮的效 <el-table-column prop="date" label="日期”width="180”/>
心<el-table-column prop="name" label="姓名"width="180"/>
<el-table-column prop="address" label="住址"width="300”/>
</el-table>
6 </template>
1-button> <script setup>
-button> const tableData = 
9
10 date:12023-02-03', 
17
name：‘王五'，
冯绑定 disabled 13 address:'北京市海淀区'
表示禁用按钮。 15
date：'2023-03-02'，
作为主组件。 17 name：‘王六’，
}1
图6-2所示。 18 address：'北京市昌平区!
19 16
20
21 date：'2023-05-04',
22 name：‘张三'，
23address：北京市丰台区'
气
24
25date:'2023-05-01'，
26name：李四'，
28 address：·北京市大兴区 创建
29 )
301 关代码，复
31×/script>

2在上述代码中，第2行代码绑定data数组对象 tableData；第9~30行代码定 2 1 <templ <el-
tableData数组对象。其中第3~5行代码使用prop属性分别设置tableData中的键名date 3 <E name 和address. 4
②修改 srelmain.js文件，切换页面中显示的组件，具体代码如下。

 import App from './components/Table.vue'