element ui表头根据后端返回数据动态渲染
时间: 2023-06-24 20:05:20 浏览: 106
Vue+Element ui 根据后台返回数据设置动态表头操作
你可以使用 `Table` 组件的 `prop` 属性 `columns` 来动态渲染表头。具体步骤如下:
1. 在请求后端数据之前,先定义一个空的表头数组 `columns`。
2. 请求后端数据,获取到数据后,根据数据的字段信息,动态生成表头的配置项,将其添加到 `columns` 数组中。
3. 在 `Table` 组件上绑定 `columns` 属性,用于渲染动态生成的表头。
以下是一个简单的示例代码:
```html
<template>
<div>
<el-table :data="tableData" :columns="columns"></el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
columns: []
}
},
methods: {
fetchData() {
// 模拟请求后端数据
const response = {
data: [
{ id: 1, name: 'Tom', age: 18 },
{ id: 2, name: 'Jerry', age: 20 }
],
columns: [
{ prop: 'id', label: 'ID' },
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' }
]
}
// 更新表格数据和表头配置
this.tableData = response.data
this.columns = response.columns
}
},
mounted() {
this.fetchData()
}
}
</script>
```
在上面的示例中,我们通过模拟请求后端数据的方式来动态生成表头的配置项。在实际开发中,你需要根据后端返回的数据格式来动态生成表头的配置项。
阅读全文