vue3+Ts+elementPlus二次封装Table分页表格,表格内展示图片、switch开关、支持

目录

一.项目文件结构

二.实现代码

1.子组件(表格组件)

 2.父组件(使用表格)


一.项目文件结构

1.表格组件(子组件)位置

vue3+Ts+elementPlus二次封装Table分页表格,表格内展示图片、switch开关、支持_第1张图片

2.使用表格组件的页面文件(父组件)位置

vue3+Ts+elementPlus二次封装Table分页表格,表格内展示图片、switch开关、支持_第2张图片

3.演示图片位置

vue3+Ts+elementPlus二次封装Table分页表格,表格内展示图片、switch开关、支持_第3张图片

elementPlus表格 Table 表格 | Element Plus

4.笑果演示

表格笑果

vue3+Ts+elementPlus二次封装Table分页表格,表格内展示图片、switch开关、支持_第4张图片

点击图片放大显示笑果

vue3+Ts+elementPlus二次封装Table分页表格,表格内展示图片、switch开关、支持_第5张图片

二.实现代码

1.子组件(表格组件)

1. src/views/Table.vue html部分







            
            
                
            
            
                
            
            
            
                
            
        

js部分

 2.父组件(使用表格)

1.src/views/Dashboard.vue html部分

 2.js部分


                    
                    

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