乐趣区

uniapp-table-组件

jiezi
  • 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

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

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
退出移动版