elementUI table 绑定数据
时间: 2023-09-24 07:11:10 浏览: 275
要绑定数据到 ElementUI 的表格中,你需要做以下几个步骤:
1. 在你的组件中引入 ElementUI 表格组件:`import { ElTable, ElTableColumn } from 'element-ui'`
2. 在模板中使用 ElTable 和 ElTableColumn 组件,并在 ElTable 中绑定数据源,例如:
```
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
```
以上代码中,`:data="tableData"` 绑定了数据源 `tableData` 到表格中。
3. 在你的 Vue 实例中定义 `tableData` 数据源,例如:
```
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 22, gender: '女' },
{ name: '王五', age: 30, gender: '男' },
{ name: '赵六', age: 25, gender: '女' }
]
}
}
```
以上代码中,`tableData` 是一个数组,包含了表格中的数据。
这样,你就可以将数据源绑定到 ElementUI 表格中了。
阅读全文