el-table表格单行表头

最近开发项目遇到一个订单列表展示的需要在每一行表头上进行订单的某些操作和数据展示如图:

表格一般我都是使用element ui的el-table 正常使用肯定是不能满足这个效果

想了想也是有点思绪 便做了一个demo记录一下 

效果图:

el-table表格单行表头_第1张图片

父组件代码:






子组件:






原理:父组件引入el-table只使用表头 隐藏内容区域 把每一项的值传递到子组件进行展示 子组件隐藏掉头部 并且使用自定义头部。

你可能感兴趣的:(vue.js,前端,javascript)