el‐table - daniel-qa/Vue GitHub Wiki
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Element Plus with Table</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
</head>
<body>
<div id="app">
<el-container style="height: 500px; border: 1px solid #eee">
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140"></el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</el-main>
</el-container>
</div>
<script>
const { createApp, ref } = Vue;
const App = {
setup() {
// 定义响应式数据
const tableData = ref([
{ date: '2024-01-01', name: '王小虎', address: '北京' },
{ date: '2024-01-02', name: '李小龙', address: '上海' },
// 更多数据...
]);
// 返回数据
return {
tableData
};
}
};
// 创建 Vue 应用并挂载
createApp(App).use(ElementPlus).mount('#app');
</script>
</body>
</html>
el-container 是 Element Plus 中的容器组件，用于创建布局。
el-main 是一个主要内容区域的组件。
el-table 是表格组件，:data="tableData" 表示数据绑定到 tableData 响应式变量。
el-table-column 用于定义表格的每一列，通过 prop 属性绑定对应数据字段，label 属性定义列名，width 用来设置列宽度。