以下是一个简单的例子，演示如何在 Vue.js 中使用 Element Plus 的 Table 表格：
首先，确保你已经引入了 Element Plus 库。你可以通过以下方式之一来引入：
1. 使用 npm 安装：
npm install element-plus --save
然后在你的项目中使用：
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
2. 直接在 HTML 中引入：
<!-- 在你的 HTML 文件中引入 Element Plus 的 CSS 文件 -->
<link rel="stylesheet" href="path/to/element-plus/theme-chalk/index.css">
<!-- 在你的 HTML 文件中引入 Element Plus 的 JS 文件 -->
<script src="path/to/element-plus/index.js"></script>
然后，在你的 Vue 组件中使用 Table 表格：
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="age" label="年龄" width="180"></el-table-column>
<el-table-column prop="gender" label="性别" width="180"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 25, gender: '男' },
{ name: '李四', age: 30, gender: '女' },
{ name: '王五', age: 22, gender: '男' },
{ name: '赵六', age: 28, gender: '女' }
]
};
}
}
</script>
在上述例子中，tableData 是表格要展示的数据，el-table 用于包裹整个表格，el-table-column 用于定义每一列，通过 prop 属性指定数据对象的字段，label 属性指定列头的文本，width 属性指定列的宽度。
转载请注明出处：http://www.zyzy.cn/article/detail/5549/ElementPlus