uniapp table 组件-CSDN博客

uniapp table 组件

滑动验证页面

 

• uniapp是2019年非常的火爆的一个Dcloud开发跨平台前端工具，支持ios Android wap，小程序，除了Android有点卡外，其他暂时没有发现什么瑕疵。
• 最近在捣鼓uniapp项目，恰好用到table组件，之前写了个demo，后面一直都想写一个像样的，可以分享给别人用的组件。
• 自己的水平一般，开发出来的组件可能代码不咋地，还望路过大神斧正。
• 下面是我写的uniapptable的说明，希望能够帮到别人

这里默认大家都非常熟悉vue和uniapp的包引入，不再阐述uniapp组件引入方法以及uniapp组件和vue的区别

插件市场更新会比github更新延后，查看github项目:

• uniapp是2019年非常的火爆的一个Dcloud开发跨平台前端工具，支持ios android wap，小程序，除了android有点卡外，其他暂时没有发现什么瑕疵。
• 最近在捣鼓uniapp项目，恰好用到table组件，之前写了个demo，后面一直都想写一个像样的，可以分享给别人用的组件。
• 自己的水平一般，开发出来的组件可能代码不咋地，还望路过大神斧正。
• 下面是我写的uniapptable的说明，希望能够帮到别人

这里默认大家都非常熟悉vue和uniapp的包引入，不再阐述uniapp组件引入方法以及uniapp组件和vue的区别

插件市场更新会比github更新延后，查看github项目 GitHub – MTTTM/uniapp-elemnt-table: 模仿element-ui的表格组件

插件市场更新会比github更新延后，查看demo源码

插件市场更新会比github更新延后，查看demo使用引入方式

支持功能大概如下

点击查看demo,PC浏览器模拟显示和真实移动设备访问有差异

行合并

列合并

固定table高度

数据加载

数据为空

自定义行样式

自定义某行样式

自定义某行某列某个单元格样式

使用插槽自定义单元格内容

数据多选操作

数据单选操作

数据删除&&数据编辑或者更多操作方式

固定右边一列

固定左边一列

固定高度不支持同时固定某一列

已测试平台 ->ios，android，wap，微信小程序

部分效果预览

基本使用示例源码

html

<v-table :columns="columns" :list="data"></v-table>

JavaScript (data数组必须提供id)

1. import vTable from “@/components/table.vue”
2. export default{
3. components: {
4. vTable
5. },
6. data(){
7. return {
8. data: [{
9. name: ‘John Brown’,
10. age: 18,
11. address: ‘New York No. 1 Lake Park’,
12. id: “1”,
14. }
15. ],
16. columns: [{
17. title: “ID”,
18. key: “id”
19. },
20. {
21. title: ‘Name’,
22. key: ‘name’
23. },
24. {
25. title: ‘Age’,
26. key: ‘age’
27. },
28. {
29. title: ‘Address’,
30. key: ‘address’
31. }
32. ],
33. }
34. }
36. }

基本属性

html标签属性

事件

list 参数

columns 参数

插件市场更新会比github更新延后，查看demo源码

插件市场更新会比github更新延后，查看demo使用引入方式

支持功能大概如下

点击查看demo,PC浏览器模拟显示和真实移动设备访问有差异

行合并

列合并

固定table高度

数据加载

数据为空

自定义行样式

自定义某行样式

自定义某行某列某个单元格样式

使用插槽自定义单元格内容

数据多选操作

数据单选操作

数据删除&&数据编辑或者更多操作方式

固定右边一列

固定左边一列

固定高度不支持同时固定某一列

已测试平台 ->ios，android，wap，微信小程序

部分效果预览

基本使用示例源码

html

<v-table :columns="columns" :list="data"></v-table>

JavaScript (data数组必须提供id)

1. import vTable from “@/components/table.vue”
2. export default{
3. components: {
4. vTable
5. },
6. data(){
7. return {
8. data: [{
9. name: ‘John Brown’,
10. age: 18,
11. address: ‘New York No. 1 Lake Park’,
12. id: “1”,
14. }
15. ],
16. columns: [{
17. title: “ID”,
18. key: “id”
19. },
20. {
21. title: ‘Name’,
22. key: ‘name’
23. },
24. {
25. title: ‘Age’,
26. key: ‘age’
27. },
28. {
29. title: ‘Address’,
30. key: ‘address’
31. }
32. ],
33. }
34. }
36. }

基本属性

html标签属性

事件

list 参数

columns 参数