【VUE+ elementUI 实现动态表头渲染】

最新推荐文章于 2024-07-26 13:33:53 发布

zlting~

最新推荐文章于 2024-07-26 13:33:53 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/sunshineTing2/article/details/134270484

本文详细介绍了如何使用Vue和elementUI框架实现动态表头渲染，包括定义表头数据和表格数据，以及在HTML模板中通过v-for遍历和数据绑定来展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE+ elementUI 实现动态表头渲染

1、定义 `columns`（表头数据）和 `dataList`（表格数据）

data() {
	return {
		loading: false,
		dataList: [
			{ name: '张三', sex: '男', age: 18 },
			{ name: '林琳', sex: '女', age: 20 },
			{ name: '王五', sex: '男', age: 22},
			{ name: '赵六', sex: '男', age: 20},
		],
		columns: [
	      { label: "姓名", prop: "name" },
	      { label: "性别", prop: "sex" },
	      { label: "年龄", prop: "age" },
	    ],
	}
},

2、通过数据渲染页面

<el-table ref="tables" v-loading="loading" :data="dataList">
  <el-table-column
    v-for="item in columns"
    :key="item.prop"
    :prop="item.prop"
    :label="item.label"
    align="center"
  >
    <template slot-scope="scope">
      <span>{{ scope.row[item.prop] }}</span>
    </template>
  </el-table-column>
</el-table>