摘要：最近在捣鼓项目，恰好用到组件，之前写了个，后面一直都想写一个像样的，可以分享给别人用的组件。自己的水平一般，开发出来的组件可能代码不咋地，还望路过大神斧正。
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，微信小程序 部分效果预览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} |
| 属性 | 说明 | 类型 |
|---|---|---|
| cellClassName | 设置行内某一列的样式类名 | Object |
| operate | 数据操作的列 | Object |
| 属性 | 说明 | 类型 |
|---|---|---|
| $width | 设置列宽度 例如 "120px",请务必使用px单位 | String |
| $fixed | 固定某一列，可选left和right | String |
| $operateList | 数据操作选项和list的operate对应 | Array |
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/106414.html
摘要：使用当前最流行最先进的开源技术实现服务组件化及管理，真正为企业打造分布式微服务云架构平台。平台安全性平台严格遵循安全规范，使用前后端双重验证，统一用户认证及密码安全策略，标准功能权限数据权限过滤。 鸿鹄云架构系统管理平台是一个大型企业、分布式、微服务、云架构的JavaEE体系快速研发平台，基...
你知道吗？uniapp是用vue.js开发所有前端应用的框架,开发人员只需要编写一套代码就可以发布到安卓、iOS、H5和小程序、快应用等平台，本篇文章就是为大家讲述相关内容。 前言 这段时间在开发uniapp的时候使用到map组件 总结一下本次在uniapp中使用map遇到的一些问题 文章分别是基础 定位图标获取自身经纬度 通过经纬度获取当时城市信息 首先先看实现效果 首先引入...
摘要：基于跨端开发短视频直播聊天实例。全新研发的一款多端仿制抖音短视频直播聊天项目，基于等技术开发而成。播放进度变化时触发小视频支持播放暂停，上下滑动切换效果。 uni-...
摘要：官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署，在微信开发工具中直接上传代码就行。 为什么 学习 Java 三年，目前已经工作了2年，因为自学，基础差，所以打算年末总结一下常见的基础知识和面试点； 也可以通过独立做一个项目整合自己工作期间学习的知识，加深印象。 但是想着回家或是平时手机用的多，做一款APP和小程序很方便查看。 项目展示 本...
在微信小程序开发中用新功能利用uni-app来开发，我们看看都有哪些优缺？ 首选我们看看官网给出的解决思路方案 https://uniapp.dcloud.io/hybrid 方式1：把原生小程序转换为uni-app源码。有各种转换工具，详见 方式2：新建一个uni-app项目，把原生小程序的代码变成小程序组件，进而整合到uni-app项目下。uni-app支持使用小程序wxml组件，...
阅读 1997·2023-04-26 01:57
阅读 2937·2023-04-25 16:30
阅读 2039·2021-11-17 09:38
阅读 817·2021-10-08 10:14
阅读 1136·2021-09-23 11:21
阅读 3451·2019-08-29 17:28
阅读 3128·2019-08-29 15:27
阅读 744·2019-08-29 13:04
