<template>
<el-table class="table" :data="tableData" border stripe style="width: 100%">
<!-- 循环 table 列,使用template方便后期v-if的使用 -->
<template v-for="(item, index) in fields">
<el-table-column
:prop="item.prop"
:label="item.label"
:width="item.width"
:key="index"
align="center"
></el-table-column>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
// 封装 table 字段,根据接口数据动态传入
fields: [
{
prop: "name",
label: "姓名",
width: '200',
},
{
prop: "date",
label: "时间",
width: null,
},
{
prop: "address",
label: "地址",
width: null,
},
],
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
};
},
};
</script>
<style scoped>
</style>
Vue - 简单封装elementUI表格
最新推荐文章于 2024-06-17 01:58:07 发布