表格(vTable)

子组件

table-columns

table-columns组件只在table组件中使用

单组件引入

import <name> from ‘vucc/table’;

示例


增加删除

代码 V

<v-table :page-size="10" :has-all-select="true" :cols-num="5" :on-checkbox-click="table.checkboxClick" :data="table.data" :has-select-all="true">
    <v-table-columns :prop="'key'" :label="'索引'" :td-style="{width: '100px', color: 'red'}" :is-sort="true"></v-table-columns>
    <v-table-columns :prop="'name'" :label="'姓名'" :render-header="renderHeader" :is-sort="true" :sort-fn="sortFn"></v-table-columns>
    <v-table-columns :prop="'age'" :label="'年龄'"></v-table-columns>
    <v-table-columns :prop="'address'" :label="'地址'"></v-table-columns>
    <v-table-columns inline-template :label="'操作1'">
        <span>
            <v-button @click.native="clickX(row)">增加</v-button>
            <v-button @click.native="clickX(row)">删除</v-button>
        </span>
    </v-table-columns>
</v-table>


data() {
    const _this = this;
    return {
        // table
        table: {
            data: (function() {
                var res = [];
                for (let i = 0; i < 50; i++) {
                    res.push({
                        key: i,
                        name: `name${i}`,
                        age: 32,
                        address: `address${i}号`
                    });
                }
                return res;
            })()
        }
    }
},
methods: {
    renderHeader() {
        return `我是渲染函数渲染的`;
    },
    clickX() {
        console.log(arguments)
    },
    sortFn(data, sort) {
        data.sort((a, b) => {
            return sort ? b.index - a.index : a.index - b.index;
        })
    }
}



table-columns 属性

参数 说明 类型 可选值 默认值
prop 对应data中的key,用于渲染table的列 String - -
label 表头展示的标签字段 String - -
tdStyle 列的附加样式 Object - -
isSort 是否有排序箭头 Boolean - -

table-columns 方法

方法名 说明 类型 参数 默认值
renderHeader 头部渲染函数,可以使用此函数来渲染表头 Function - -
renderTd 列的渲染函数,可以使用此函数来渲染列 Function - -
sortFn 用于排序的参数的函数 Function data,列数据 sort,排序的正负值 -

table 方法

参数 说明 类型 可选值 默认值
isShowPagination 是否显示分页栏 Boolean - true
currentPage 当前组件停留页 Number - 1
pageSize 每一页展示多少条数据 Number - 5
total 总页数 Number - -
data 表的渲染数据 Array - -
colsNum 列的数量 Number - -
hasSelectAll 是否展示全选框和每行前的勾选框 Boolean - -
emptyText 空数据提示,可以传入html String - ‘’

table 方法

方法名 说明 类型 参数 默认值
onChangePage 用于传入分页组件页面变更事件进行响应 Function - -
onSizeChange 当每页页数变化时产生的数据 Function - -
onSelectAll 全选事件，只有在hasAllSelect为true时可用，传入全选checkbox框的值 Function - -
← 滑动条(vSlider) 分页(vPagination) →