vue element 中的table动态渲染实现（动态表头）
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。
子组件table中template模板
接收父组件传过来的数据
props:{
tableData:{//父组件传递过来的表格数据
type:Array,
default:[]
},
tableLabel:{//父组件传递过来的表头数据
type:Array,
default:()=>{
return[]
}
}
}
父组件
data(){ return{ //子组件的表格数据 tableData:[ {id:1,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:2,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:3,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:4,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:5,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:6,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:7,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:8,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:9,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:10,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:11,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05}, {id:12,date:'2018-07-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05} ], //子组件的表头数据 tableLabel:[ {label:'',width:'40',prop:'id'}, {label:'日期',width:'',prop:'date'}, {label:'销售量',width:'',prop:'sales'}, {label:'销售额',width:'',prop:'sale'}, {label:'成本',width:'',prop:'const'}, {label:'利润',width:'',prop:'profit'} ] } }
问题：这种方式只能在一个组件中动态渲染，但是当我们需要操作每一列数据的时候，没法操作，因为elementtable再带的方法是每个单元格点击事件，而不符合我们需求，如何能实现表格动态渲染，并且每个组件都能使用，还能够实现操作的可控的列，下节分享。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。