700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 基于element- table 实现表格动态数据 表头渲染

基于element- table 实现表格动态数据 表头渲染

时间:2018-12-16 05:45:07

相关推荐

基于element- table 实现表格动态数据 表头渲染

首先需要有列表的数据数组和表头的数组,然后循环表头数组,把表头和数据数组对应的key赋给prop

<template><!-- 基于element的动态表头实现 --><div><el-table :data="dataSource" style="width: 100%"><el-table-column v-for="(item) in columns" :prop="item.key" :label="item.title" width="180" :key="item.key"><template slot-scope="scope"><span v-if="item.key == 'name'">{{scope.row.name +'你好'}}</span><span v-else>{{scope.row[item.key]}}</span></template></el-table-column></el-table></div></template>

<script>export default {data() {return {dataSource: [{key: "1",name: "胡彦斌",age: 32,address: "西湖区湖底公园1号",},{key: "2",name: "胡彦祖",age: 42,address: "西湖区湖底公园1号",},{key: "1",name: "胡彦斌",age: 32,address: "西湖区湖底公园1号",},{key: "2",name: "胡彦祖",age: 42,address: "西湖区湖底公园1号",},],columns: [{title: "姓名",dataIndex: "name",key: "name",},{title: "年龄",dataIndex: "age",key: "age",},{title: "住址",dataIndex: "address",key: "address",},],};},};</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。