更新记录

1.0.3(2019-07-15)

-- 修复选择器单选bug

1.0.2(2019-07-15)

--

查看更多

平台兼容性

Table props

属性 说明 类型 默认值
data 显示的结构化数据 Array [ ]
columns 表格列的配置描述,具体项见后文 Array [ ]
border 是否显示纵向边框 Boolean false
height 表格高度,无需设置单位,设置后,如果表格内容大于此值,会固定表头 Number --
headbBackground 表头的背景颜色 String #C8C7CC
noDataText 数据为空时显示的文字 String 暂无数据

Table events

属性 说明 返回值
on-row-click 单击某一行时触发 返回一个对象,其中: row:当前行的数据 index:下标
on-select-all 在多选模式下有效,点击全选时触发 selection:已选项数据
on-select 在多选模式下有效,选中某一项时触发 返回一个对象,其中: allChecked:已选项数据 checked:刚选择项数据

column** **

列描述数据对象,是 columns 中的一项

属性 说明 类型 默认值
type 列类型,可选值为index(序号)、checkbox(多选)、html(默认) String html
title 列头显示文字 String --
key 对应列内容字段名 String --
width 列宽,单位为upx number 200
align 对齐方式,可选值为left、center、right String left
render 自定义渲染列,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 row、column 和 index,分别指当前行数据,当前列数据,当前行索引 Function --

示例:

<template>
    <view>
       <wTable
       :columns="columns"
       :data="tableData" 
       @on-row-click="clickrow"
       border
       @on-select-all="selectAll"
       @on-select="selectO"/>
    </view>
</template>

<script>
    import wTable from '@/components/z-table/wTable.vue';
    export default {
        components:{wTable},
        data() {
            return {
                tableData:[],
                columns:[
                    { type:'checkbox',width:80,align:"center" },
                    { type:'index',width:70,align:"center" },
                    { title:'姓名',key:'name' },
                    { title:'年龄',key:'age' },
                    { title:'居住地址',key:'address' },
                    { title:'月薪',render:(h,{ row })=>{
                        return h('view',row.money+'元')
                    }},
                ]
            }
        },
        methods: {
             getTableData(){
                this.tableData=[
                  { name:'大锤',age:'17',address:'郑州',money:'1200' },
                  { name:'张三',age:'21',address:'成都',money:'2400' },
                  { name:'李四',age:'16',address:'南京',money:'4800' },
                  ] 
            },
            clickrow({ row,index }){
                console.log(row,index)
            },
            selectAll(val){
                console.log(val)
            },
            selectO({ allChecked,checked }){
                console.log(allChecked,checked)
            }
        },
        mounted(){
            this.getTableData()
        },
    }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问