search

iuap-design / tinper-bee

🐝 一套基于 react.js 和 iuap design 设计语言实现的前端组件库 http://bee.tinper.org
MIT License
542 stars 71 forks source link

表格hover呼出自定义按钮 #421

Closed contryPresident closed 5 years ago

contryPresident commented 5 years ago

环境及版本信息

您所在的领域、行业或项目组：

描述这个问题:

官网样例搬过来的代码出不来效果

1、代码

import React, { Component } from 'react';
import { Row, Table, Pagination} from "tinper-bee";
import Button from "bee-button";
import Checkbox from 'bee-checkbox';
import Title from "components/Title";
import AppSelect from "../../components/AppSelect";
import multiSelect from "./multiSelect.js";
import './index.less';
let MultiSelectTable  = multiSelect(Table, Checkbox);
const pageData = {
    1: [
        { a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
        { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
        { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "3" },
        { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "4" },
        { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "5" },
    ],
    2: [
        { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "9" },
        { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "10" },
        { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "11" },
        { a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "12" }
    ]
};

class LogFile extends Component{
    constructor(props) {
        super(props);
        this.state = {
            checkedFlag: true,
            versionList: [{id: 1, name: '1.09'}, {id: 2, name: '2.09'}],
            selectedVersion: '',
            envList: [{id: 1, name: 'Local'}, {id: 2, name: 'Dev'}],
            selectedEnv: '',
            data: pageData[1],
            activePage: 1
        }
    }
    // 勾选按钮事件
    getSelectedDataFunc = (selectedList,record,index,newData) => {
        console.log("selectedList", selectedList,"index",index);
        // 注意：需要用回调中提供的参数 newData，去更新 state 或 store 中的 data 属性值，否则当表格重新render的时候，已选数据会被冲刷掉。
    };
    // 行hover事件
    getHoverContent=()=>{
        return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
    }
    // 分页点击事件
    handleSelect(eventKey) {
        this.setState({
          data: pageData[eventKey],
          activePage: eventKey
        });
    }
    dataNumSelect = (index, value) => {
        console.log(index, value);
    }
    // 保存
    onChange() {
        this.setState((preval)=>({checkedFlag: !preval.checkedFlag}));
    };
    versionChange({ id, name }) {
        this.setState({selectedVersion: name});
    }
    envChange({ id, name }) {
        this.setState({selectedEnv: name});
    }
    render() {
        const {versionList, selectedVersion, envList, selectedEnv} = this.state;
        const columns = [
            { title: "员工编号", dataIndex: "a", key: "a",  },
            { title: "员工姓名", dataIndex: "b", key: "b", },
            { title: "性别", dataIndex: "c", key: "c", },
            { title: "部门", dataIndex: "d", key: "d",  },
            { title: "职级", dataIndex: "e", key: "e", }
          ];

        const data = [
            { a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "3" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "4" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "5" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "6" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "7" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "8" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "9" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "10" },
            { a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "11" },
            { a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "12" }
        ];

        return (
            <Row className="confCneterContainer batch-upgrade">
                <Title name="日志文件" showBack={false}/>
                <div className="confCneterContent">
                    <div className="clearfix margin-top-10">
                        <Button
                        className="margin-right-10 margin-bottom-20"
                        colors="primary"
                        >
                        读取
                        </Button>
                        <Button
                        className="margin-right-10 margin-bottom-20 u-button-border"
                        colors="secondary" 
                        >
                        添加
                        </Button>
                        <Button
                        className="margin-right-10 margin-bottom-20 u-button-border"
                        colors="secondary"
                        >
                        删除
                        </Button>
                        <Button
                        className="margin-right-10 margin-bottom-20 u-button-border"
                        colors="secondary"
                        >
                        保存
                        </Button>
                        <Button
                        className="margin-right-10 margin-bottom-20 u-button-border"
                        colors="secondary"
                        >
                        更新
                        </Button>
                        <div className="pull-right margin-bottom-20">
                        <Checkbox
                            // onDoubleClick={ this.handleDblClick }
                            ref="test"
                            inverse
                            checked={this.state.checkedFlag}
                            onChange={this.onChange.bind(this)}>
                            保存到所有服务器
                        </Checkbox>
                        </div>
                    </div>
                    <AppSelect 
                    versionChange = {this.versionChange.bind(this)}
                    envChange = {this.envChange.bind(this)}
                    versionList = {versionList}
                    selectedVersion = {selectedVersion}
                    envList = {envList}
                    selectedEnv = {selectedEnv}
                    >
                    </AppSelect>
                    <Table
                    columns={columns} 
                    data={this.state.data}
                    height={40}
                    hoverContent={this.getHoverContent}
                    // multiSelectConfig={multiObj} //可以自定义 Checkbox 属性
                    getSelectedDataFunc={this.getSelectedDataFunc}
                    />
                    <MultiSelectTable 
                    columns={columns} 
                    data={this.state.data}
                    height={40}
                    hoverContent={this.getHoverContent}
                    // multiSelectConfig={multiObj} //可以自定义 Checkbox 属性
                    getSelectedDataFunc={this.getSelectedDataFunc}/>
                    <Pagination
                    first
                    last
                    prev
                    next
                    maxButtons={5}
                    boundaryLinks
                    activePage={this.state.activePage}
                    onSelect={this.handleSelect.bind(this)}
                    onDataNumSelect={this.dataNumSelect}
                    showJump={true}
                    total={100}
                    dataNum={1}
                    />
                </div>
            </Row>
        )
    }
}
export default LogFile;

2、报错信息

当前的行为：效果（可截图说明）及动作描述

期望的行为:

yangchch6 commented 5 years ago

鼠标 hover 到表格行上的时候，可以截个图

contryPresident commented 5 years ago

没有反应

yangchch6 commented 5 years ago

image

这是我测试的版本： image

yangchch6 commented 5 years ago

写法没问题，应该是版本太低了。bee-table@2.0.0 之后才增加了 hoverContent 属性，需要升级后使用。

contryPresident commented 4 years ago

怎么升级？