el-table表格数据回显
时间: 2023-07-27 08:24:40 浏览: 175
uni-app 富文本编辑 回显富文本和修改富文本!
el-table 是 ElementUI 提供的表格组件,数据回显需要先将数据绑定到表格的数据源中,然后在表格中显示。以下是一个简单的例子:
```
<template>
<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>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: '张三',
age: 18,
gender: '男'
},
{
name: '李四',
age: 20,
gender: '女'
}
]
};
}
};
</script>
```
在上面的代码中,`tableData` 是一个数组,里面包含了两个对象,每个对象代表了一行数据。通过 `prop` 属性来映射表格列与数据源中的属性,这样就可以将数据回显到表格中了。
阅读全文