let tabledata={ "page": 1, "total": 47, "limit": 10, "is_next": true, "is_previous": false, "data": [ { "id": 1, "name": "EMS实时", "key_word": "ems_realtime", "is_enable": true, "device_type": 5 }, { "id": 2, "name": "EMS手动", "key_word": "ems_manual", "is_enable": true, "device_type": 5 }, { "id": 3, "name": "EMS测试", "key_word": "ems_test", "is_enable": true, "device_type": 5 } ] };用上面数据el-table动态生成
时间: 2023-07-30 20:11:15 浏览: 154
你可以使用 Vue.js 中的 `v-for` 指令来根据 `tabledata` 的数据动态生成 `el-table`。以下是一个示例代码:
```html
<template>
<div>
<el-table :data="tabledata.data" border>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="key_word" label="关键词"></el-table-column>
<el-table-column prop="is_enable" label="是否启用">
<template slot-scope="scope">
<el-tag v-if="scope.row.is_enable" type="success">是</el-tag>
<el-tag v-else type="danger">否</el-tag>
</template>
</el-table-column>
<el-table-column prop="device_type" label="设备类型"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tabledata: {
page: 1,
total: 47,
limit: 10,
is_next: true,
is_previous: false,
data: [
{
id: 1,
name: "EMS实时",
key_word: "ems_realtime",
is_enable: true,
device_type: 5
},
{
id: 2,
name: "EMS手动",
key_word: "ems_manual",
is_enable: true,
device_type: 5
},
{
id: 3,
name: "EMS测试",
key_word: "ems_test",
is_enable: true,
device_type: 5
}
]
}
};
}
};
</script>
```
在上述代码中,我们使用 `v-for` 指令遍历 `tabledata.data` 数组,然后将每个对象的属性绑定到 `el-table-column` 组件的 `prop` 属性上,从而动态生成表格列。在第四个列中,我们使用 `<template>` 和 `slot-scope` 来自定义显示内容,根据 `is_enable` 属性来显示不同的标签。
请注意,以上示例代码仅为演示如何使用 `el-table` 动态生成表格,并基于提供的数据结构进行了简化。你可以根据实际需求进行调整和扩展。
阅读全文