Element ui的table动态渲染表头和列表数据

_励志

已于 2022-11-01 14:32:08 修改

阅读量338

点赞数

文章标签： ui

于 2021-11-09 11:53:50 首次发布

本文链接：https://blog.csdn.net/weixin_52240193/article/details/121225123

版权

<template>
<div>
<el-table
    :data="tableData"
    height="400px"
    max-height="400px"
    size="small"
    >
    <el-table-column
        v-for="(item, index) in TableHeader"
        :key="index"
        :prop="item.prop"
        :width="item.width"
        :label="item.label">
    </el-table-column>
</el-table>
</div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      		tableData: [
			{id: 1, date: '2021-11-9', sales: '打羽毛球', },
			{id: 2, date: '2021-11-10', sales: '打乒乓球', },
			{id: 3, date: '2021-11-11', sales: '打篮球',},
			{id: 4, date: '2021-11-12', sales: '踢足球', },
		],
		TableHeader: [
            {label: 'id',  prop: 'id'},
            {label: '日期',  prop: 'date'},
            {label: '活動',  prop: 'sales'},
        ]
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style  scoped>
</style>