antd-col-table v0.1.0-beta4

ant-dynamic-table

一、安装及引入

安装包

yarn add antd-dynamic-table -s

项目中引入包

import AntdDynamicTable from 'antd-dynamic-table'

注入Vue

Vue.use(VueAntdDynamicTable)

需要使用页面引入包

import { AntdDynamicTable } from "antd-dynamic-table"

组件注册

component: { AntdDynamicTable }

二、使用

例子

<AntdDynamicTable
    :id="mytable"
    :columns="columns"
    :dbData="data"
    :tableHeight="{ y: 'calc(100vh - 310px)' }"
    :canEdit="true"
    :canCheck="true"
    :singleCheck="true"
>
</AntdDynamicTable>

columns: [
    {
        title: "节日",
        dataIndex: "festival",
        width: 180,
        align: "center",
        sort: true,
        filter: true,
    },
    {
        title: "时间",
        dataIndex: "time",
        width: 180,
        align: "center",
        sort: true,
        filter: false,
    },
    {
        title: "假期长度",
        dataIndex: "holidayLength",
        width: 180,
        align: "center",
        sort: true,
        filter: true,
    }
],
data: [
    {
        festival: "元旦",
        time: '2021-01-01',
        holidayLength: 3,
    },
    {
        festival: "春节",
        time: '2021-02-11',
        holidayLength: 7,
    },
    {
        festival: "清明",
        time: '2021-04-03',
        holidayLength: 3,
    },
    {
        festival: "劳动节",
        time: '2021-05-01',
        holidayLength: 5,
    },
    {
        festival: "端午",
        time: '2021-06-12',
        holidayLength: 3,
    },
    {
        festival: "中秋",
        time: '2021-09-19',
        holidayLength: 3,
    },
    {
        festival: "国庆",
        time: '2021-10-01',
        holidayLength: 7,
    }
]

参数