react table组件

import Reactfrom 'react';
import {Button} from "@alifd/next";
import Style from './index.module.scss'
const TableList = (props) => {//  可以接收props// 只适用于修改单个因子需要传独立ID适用// key value的数据结构请用飞冰或ANTD// 定义props包含两个数组 数据格式必须为// {//   属性:{//     属性:'xx',//       因子ID:''// }// }// headerArr 格式 为// {//   value: 'xxx',//     dataIndex: '属性匹配',//   width:百分比// },const Arr = [{name: {name: '张三',id: 1},age: {age: 23,id: 2},name1: {sex: '男',id: 3}},{name: {name: '马六',id: 4},age: {age: 43,id: 5},sex: {sex: '女',id: 6}},{name: {name: '李四',id: 7},age: {age: 23,id: 8},sex: {sex: '男',id: 9}},{name: {name: '王五',id: 10},age: {age: 13,id: 11},sex: {sex: '男',id: 12}},];const headerArr = [{value: '姓名',dataIndex: 'name',width:10},{value: '年龄',dataIndex: 'age',width:10,},{value: '性别',dataIndex: 'sex',width:60,},{value: '操作',width:10,},]const getData = (value) => {const render = Arr[value]return <div><Buttontype='primary'textonClick={() => {console.log(render)}}>编辑</Button></div>}return (<div className={Style.tableBox}><table className={Style.border_distance}><tr style={{backgroundColor: '#F5F5F5'}}>{headerArr.map((item,index) => {const width = item.width+'%';console.log(width)return <td style={{width}}><div className={Style.thBox}>{item.value}</div></td>})}</tr>{Arr.map((items, col) => {const data = items;return <tr>{Object.keys(data).map((item, index) => {// console.log(?:)if (headerArr[index].dataIndex === item) {return <td><div className={Style.tdBox}>{data[item][item]}</div></td>} else {return <td><div className={Style.tdBox}>{'/'}</div></td>;}})}<td><div className={Style.operationBox}>{getData(col)}</div></td></tr>})}</table></div>)
}
export default TableList;```css
.border_distance{border-collapse: collapse;  /**设置小表格之间的间距为0*/border-right:1px solid #E6E6E6;border-top:1px solid #E6E6E6;width: 100%;tr,td{border-left:1px solid #E6E6E6;border-bottom:1px solid #E6E6E6;}
}
.tableBox{background-color: white;padding: 30px;
}
.thBox{padding:8px ;}
.tdBox{padding: 8px;
}
.operationBox{padding: 8px 10px;
}

react table组件相关推荐

React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...
React中使用Ant Table组件
一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载项目的启 ...
antd中table组件中如何进行换行操作（react中）
antd中table组件中如何进行换行操作(react中) 说明效果数据代码说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
antd table设置表格一个单元格的字体颜色_alireacttable：高性能 React 表格组件
点击上方蓝字关注我们简介在前端开发中,表格一直都是最复杂的组件之一.表格不仅要支持丰富的操作(排序.过滤.搜索.分页.自定义列等),还要有非常好的性能以展示大量数据.很多组件库(例如 fusion ...
antd table设置表格一个单元格的字体颜色_开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件
背景有这样一个需求,一位 React Suite (以下简称 rsuite)的用户,他需要一个 Table 组件能够像 Jira Portfolio 一样,支持树形数据,同时需要支持大数据渲染. 截 ...
如何在React JS组件和React JS App中添加CSS样式？
In this tutorial, we will only work with CSS styles. Please ensure you have basic knowledge of HTML, ...

react table组件

react table组件相关推荐

最新文章

热门文章