Git Product home page Git Product logo

drill-table's Introduction

支持上卷下钻的动态表格

接收三个参数

columns 表格配置项

[
{
title: '一级分类', // 表头文案
dataIndex: 's1', // 字段key
filter: true, // 是否是筛选项
average:true, // 是否取平均值
rate: { // 是否是百分比
numerator: 'reach', // 分子字段key
denominator: 'mans' // 分母字段key
},
toFixed: 2 // 取几位小数
}
]

dataSource 表格数据

[
{id: 1, s1: '北部', s2: '河北',s3: '邯郸', mans: '5000', num: '10000', average: '2', reach: '3000', rate: '0.6'},
{id: 11, s1: '北部', s2: '河北',s3: '石家庄', mans: '4000', num: '12000', average: '3', reach: '3000', rate: '0.75'},
{id: 2, s1: '北部', s2: '山西',s3: '太原', mans: '4000', num: '20000', average: '5', reach: '2000', rate: '0.5'},
{id: 3, s1: '北部', s2: '北京',s3: '朝阳', mans: '8000', num: '16000', average: '2', reach: '2000', rate: '0.25'},
{id: 4, s1: '南部', s2: '江苏',s3: '南京', mans: '6000', num: '60000', average: '10', reach: '3000', rate: '0.5'},
{id: 5, s1: '南部', s2: '广东',s3: '广州', mans: '1000', num: '10000', average: '10', reach: '300', rate: '0.3'},
{id: 6, s1: '南部', s2: '浙江',s3: '温州', mans: '3000', num: '30000', average: '10', reach: '600', rate: '0.2'},
{id: 7, s1: '南部', s2: '湖南',s3: '长沙', mans: '5000', num: '15000', average: '3', reach: '200', rate: '0.04'},
{id: 71, s1: '南部', s2: '湖南',s3: '株洲', mans: '3000', num: '15000', average: '5', reach: '1000', rate: '0.33'},
{id: 8, s1: '西部', s2: '青海',s3: '西宁', mans: '7000', num: '7000', average: '1', reach: '700', rate: '0.1'},
{id: 9, s1: '西部', s2: '**',s3: '哈密', mans: '6000', num: '12000', average: '2', reach: '300', rate: '0.05'},
{id: 10, s1: '西部', s2: '陕西',s3: '咸阳', mans: '3000', num: '9000', average: '3', reach: '1500', rate: '0.5'},
]

rowKey="id" 列表行循环所需唯一key

drill-table's People

Contributors

hanxiaobo avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.