资讯专栏INFORMATION COLUMN

uniapp table 组件

Vultr / 1641人阅读

摘要:最近在捣鼓项目,恰好用到组件,之前写了个,后面一直都想写一个像样的,可以分享给别人用的组件。自己的水平一般,开发出来的组件可能代码不咋地,还望路过大神斧正。

uniapp是2019年非常的火爆的一个Dcloud开发跨平台前端工具,支持ios android wap,小程序,除了android有点卡外,其他暂时没有发现什么瑕疵。

最近在捣鼓uniapp项目,恰好用到table组件,之前写了个demo,后面一直都想写一个像样的,可以分享给别人用的组件。

自己的水平一般,开发出来的组件可能代码不咋地,还望路过大神斧正。

下面是我写的uniapptable的说明,希望能够帮到别人

这里默认大家都非常熟悉vue和uniapp的包引入,不再阐述uniapp组件引入方法以及uniapp组件和vue的区别 插件市场更新会比github更新延后,查看github项目 插件市场更新会比github更新延后,查看demo源码 插件市场更新会比github更新延后,查看demo使用引入方式 支持功能大概如下 点击查看demo,PC浏览器模拟显示和真实移动设备访问有差异 行合并 列合并 固定table高度 数据加载 数据为空 自定义行样式 自定义某行样式 自定义某行某列某个单元格样式 使用插槽自定义单元格内容 数据多选操作 数据单选操作 数据删除&&数据编辑或者更多操作方式 固定右边一列 固定左边一列 固定高度不支持同时固定某一列 已测试平台 ->ios,android,wap,微信小程序 部分效果预览






基本使用示例源码 html
    
javascript (data数组必须提供id)
    import vTable from "@/components/table.vue"
    export default{
        components: {
            vTable
        },
        data(){
            return {
                data: [{
                        name: "John Brown",
                        age: 18,
                        address: "New York No. 1 Lake Park",
                        id: "1",
                        
                    }
                ],
                columns: [{
                        title: "ID",
                        key: "id"
                    },
                    {
                        title: "Name",
                        key: "name"
                    },
                    {
                        title: "Age",
                        key: "age"
                    },
                    {
                        title: "Address",
                        key: "address"
                    }
                ],
            }
        }
        
    }
基本属性 html标签属性
属性 说明 类型 默认 必填
columns 列数据 Array -- 必填
dataColSpan 行数据 Array -- 必填
row-class-name 行样式 String或Function -- --
height 表格高度(可用固定表头) Number -- --
td-height 单元格高 Number 110 --
td-width 单元格宽 Number 30 --
td-padding 单元格间距 Number 10 --
border-color 表格边框颜色 String #666 --
th-td-height 表头单元格高 Number 30 --
loading 加载状态 Boolean false --
selection 可选mulit和single String -- --
span-method 行列合并 Function -- --
slot-cols 插槽自定义列元素,对应columns的key Array -- --
emptyText 插没数据提示文字 String -- --
emptyClickFn 没数据点击响应函数 Function -- --
事件
属性 说明 参数
@on-selection-change 单选 多选变更 {old:"",new:""}
@delete 自定义事件(它可以不叫delete,可以是任意事件,只要你在list里面定义了) {row:{},index:Number}
list 参数
属性 说明 类型
cellClassName 设置行内某一列的样式类名 Object
operate 数据操作的列 Object
columns 参数
属性 说明 类型
$width 设置列宽度 例如 "120px",请务必使用px单位 String
$fixed 固定某一列,可选left和right String
$operateList 数据操作选项和list的operate对应 Array

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106414.html

相关文章

  • Java 初学者做的第一个微信小程序总结--关于Java基础

    摘要:官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署,在微信开发工具中直接上传代码就行。 为什么 学习 Java 三年,目前已经工作了2年,因为自学,基础差,所以打算年末总结一下常见的基础知识和面试点; 也可以通过独立做一个项目整合自己工作期间学习的知识,加深印象。 但是想着回家或是平时手机用的多,做一款APP和小程序很方便查看。 项目展示 本...

    mudiyouyou 评论0 收藏0
  • 解析uni-app和原生小程序混合开发的具体实现过程

      在微信小程序开发中用新功能利用uni-app来开发,我们看看都有哪些优缺?  首选我们看看官网给出的解决思路方案  https://uniapp.dcloud.io/hybrid  方式1:把原生小程序转换为uni-app源码。有各种转换工具,详见  方式2:新建一个uni-app项目,把原生小程序的代码变成小程序组件,进而整合到uni-app项目下。uni-app支持使用小程序wxml组件,...

    3403771864 评论0 收藏0

发表评论

0条评论

Vultr

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<