在Vue 2中使用Element UI生成表格，你需要做以下几步：
- 确保Element UI已经安装并在你的项目中正确引入。
- 在Vue组件中定义数据结构，用于表格的数据。
- 使用
<el-table>组件来展示表格，并用<el-table-column>来定义表格的列。
以下是一个简单的例子：
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
// ... 更多数据
]
};
}
};
</script>在这个例子中，tableData是一个包含对象的数组，每个对象代表表格中的一行，而<el-table-column>定义了表格的列，prop属性指定了对应的数据字段。
如果你需要根据后端返回的JSON生成表格，你可以使用axios或其他HTTP客户端从后端获取数据，并在获取数据后将其赋值给tableData。
例如，使用axios获取数据：
<script>
import axios from 'axios';
export default {
data() {
return {
tableData: []
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
axios.get('/api/data')
.then(response => {
this.tableData = response.data; // 假设返回的数据结构与tableData一致
})
.catch(error => {
console.error('There was an error!', error);
});
}
}
};
</script>确保你的后端API /api/data 返回的是一个与tableData结构相同的数组。