通用vue组件化展示列表数据实例详解
一、数据的简单展示
1.首先先确定要展示的表格列名以及拿到所需要展示的数组数据
2.然后建立一个专门放el-table遍历的文件
3.在父组件中将数据列表数据存放在listData里面，然后传给子组件，子组件定义一个动态的列，通过遍历propList得到列名，然后也动态匹配prop,这样prop的值会去和listData进行匹配展示数据，这里加了一个默认插槽，由于有时候需要对某列的数据进行特殊的操作，这是就需要拿到对应的列数据，所以这里propItem.slotName就是用来动态匹配插槽，此外，再将对应的行数据显示出来
3.当要对特殊的某一列进行特殊数据的处理的时候，可以在引用这个组件对应的位置去进行插槽的匹配
例如下列就是对某一列的具体数据去进行数据的优化设计
4.当想要给表格多加某一列的数据时，可以选择在propItem里面多加一列列名
5. 如果增加的列数据能够自动显示，可以直接在组件里面加一列el-table-colunm，这里是给表格多加一列序号的，index会自动递增，这里可以选择显示或不显示，通过父组件给子组件传递的showIndexColunm的布尔值去进行判断显示
二、自定义操作的列
1.首先在propItem里面多加一列名，然后再在对应使用这个组件的文件里面，去写template动态匹配具名插槽
三、给表格加个头部标签
1.首先先给table加个头部插槽标签header，然后可以在头部插槽里面再定义几个自定义的插槽，例如下列的headerHandler
2.然后在父组件里面传对应的title给子组件，也可以进行自定义headerHandler里面的内容
四、进行封装table
1.首先建立一个content.config.ts的配置文件，里面存储那些固定的数据
2.之后把之前写的那些插槽和引用table组件的代码写在一个公共的文件夹page-content
3.然后再在goods.vue文件里面去引入page-content组件，这样goods.vue里面的代码就不会很繁琐
总结
到此这篇关于通用vue组件化展示列表数据的文章就介绍到这了,更多相关vue组件化展示列表数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Ant Design Vue是使用Vue实现的遵循Ant Design设计规范的高质量UI组件库,用于开发和服务于企业级中后台产品,下面这篇文章主要给大家介绍了关于vue中ant-design-vue组件安装与使用的相关资料,需要的朋友可以参考下2022-04-04
vue项目中我们可以通过行内样式进行动态修改样式,下面这篇文章主要给大家介绍了关于vue中如何使用定义好的变量设置css样式的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
Vue中$router.push()路由切换及如何传参和获取参数
这篇文章主要给大家介绍了关于Vue中$router.push()路由切换及如何传参和获取参数的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vant Weapp组件踩坑:picker的初始赋值解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue微信分享，在当前页面分享其他页面，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
在Vue.js中，路由与导航不仅涉及页面切换，还包括了向页面传递参数和获取查询参数，这篇文章主要介绍了Vue路由参数与查询参数传递,需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了vue3中如何使用shaka-player示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了Vue中的@blur事件 当元素失去焦点时所触发的事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue2 webpack proxy与nginx配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue Object.defineProperty及ProxyVue实现双向数据绑定
这篇文章主要介绍了Vue Object.defineProperty及ProxyVue实现双向数据绑定,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
最新评论