Element-plus之使用表格table,后怎么传入数据
在Element-plus中使用表格(<el-table>
)组件时,你可以通过data
属性传入数据。这里是一个简单的例子:
<template>
<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>
</template>
<script setup>
import { ref } from 'vue';
const tableData = ref([
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
// ...可以添加更多的数据对象
]);
</script>
在这个例子中,tableData
是一个响应式引用,包含了要在表格中显示的数据。每个数据对象应该包含el-table-column
组件中定义的prop
属性所对应的属性。
确保你已经正确安装并导入了Element-plus,并在你的Vue项目中使用了Element-plus提供的组件。
评论已关闭