uniapp-table-组件

• 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