el组件根据数据类型显示不同的表格
时间: 2024-02-11 19:07:21 浏览: 16
好的,下面是一个简单的示例代码,使用vue和element-ui库来根据数据类型显示不同的表格:
```html
<template>
<el-table :data="tableData" v-if="showTable">
<el-table-column v-if="dataType === 'users'" prop="name" label="姓名"></el-table-column>
<el-table-column v-if="dataType === 'users'" prop="age" label="年龄"></el-table-column>
<el-table-column v-if="dataType === 'orders'" prop="id" label="订单号"></el-table-column>
<el-table-column v-if="dataType === 'orders'" prop="price" label="价格"></el-table-column>
</el-table>
<div v-else>暂无数据</div>
</template>
<script>
export default {
name: 'DynamicTable',
props: {
data: {
type: Array,
default: () => [],
},
dataType: {
type: String,
default: 'users',
},
},
computed: {
tableData() {
return this.data || [];
},
showTable() {
return this.tableData.length > 0;
},
},
};
</script>
```
以上代码中,我们使用了element-ui的`el-table`和`el-table-column`组件来展示数据。通过`v-if`指令来判断数据类型并渲染不同的表格列。`props`中的`data`和`dataType`分别接收数据和数据类型,`computed`中的`tableData`用于将传入的数据处理成表格所需的格式。`showTable`用于判断是否有数据需要展示,如果没有则显示“暂无数据”。当然,你还需要在`<script>`标签中引入element-ui库。