Question

在View All Profile中，当员工用完以创纪录颜色的“年度”，“休闲”和“医疗”要闻分配的假期。在这种情况下，我们可以每年休14天年假（如果完成14天则应突出显示14个数字。还可以休假和休病假每年7天（如果完成7天则应突出7个数字）。

表格代码：

 <Table  pagination={{ pageSize: 10 }} columns={columns} dataSource={this.state.data} />

状态编码：

 state = {
      filterDropdownVisible: false,
      data: [],
      fullData: [],
      searchText: '',
      filtered: false,
    };

getdata方法代码：

 getdata() {
      this.props.actions.getData().then(() => {
        if (!this.props.viewAllProfile.getDataPending) {

          this.setState(
            {
              data: this.props.viewAllProfile.ProfData.profiles,
              fullData: this.props.viewAllProfile.ProfData.profiles,
            });
        }
      });
    }

表格代码：

 render() {
      const columns = [{
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => (
          <Link to={`/user-profile/${record.id}`}>{text}</Link>
        ),
        filterDropdown: (
          <div className="custom-filter-dropdown">
            {/* <Input
              ref={ele => this.searchInput = ele}
              placeholder="Search name"
              value={this.state.searchText}
              onChange={this.onInputChange}
              onPressEnter={this.onSearch}
            />
            <Button type="primary" onClick={this.onSearch}>Search</Button> */}
            <Search
              placeholder="By name..."
              value={this.state.searchText}
              ref={ele => this.searchInput = ele}
              onChange={this.onInputChange}
              onPressEnter={this.onSearch}
              onSearch={this.onSearch}
              enterButton
              style={{ boxShadow: '1px 1px 3px gray', borderRadius: 5 }}
            />
          </div>
        ),
        filterIcon: <Icon type="search" style={{ color: this.state.filtered ? '#108ee9' : '#aaa' }} />,
        filterDropdownVisible: this.state.filterDropdownVisible,
        onFilterDropdownVisibleChange: (visible) => {
          this.setState({
            filterDropdownVisible: visible,
          }, () => this.searchInput && this.searchInput.focus());
        },
      }, {
        title: 'Annual',
        dataIndex: 'anual',
        key: 'anual',
      }, {
        title: 'Casual',
        dataIndex: 'casual',
        key: 'casual',
      }, {
        title: 'Medical',
        dataIndex: 'medical',
        key: 'medical',
      }, {
        title: 'Special',
        dataIndex: 'special',
        key: 'special',
      }, {
        title: 'No pay',
        dataIndex: 'no_pay',
        key: 'no_pay',

      }
      ];

Answer 1

您可以使用render功能突出显示特定值。

const columns = [
  {
    title: 'Casual',
    dataIndex: 'casual',
    key: 'casual',
    render: val => val === 14 ? <span className="highligt">val</span> : val
  }
]

Answer 2

您可以为每种休假类型声明常量，并在<td></td>中的表中呈现数据时，可以比较叶子计数并使用条件JSX更新添加highlight_red类。

//In table.jsx

const TOTAL_ANNUAL = 14
const CASUAL_LEAVE = 7
const MEDICAL_LEAVE = 7

<td className={i.annual_count == TOTAL_ANNUAL ? "highlight_red" : ""}>{i.annual_count}</td>
<td className={i.casual_count == CASUAL_LEAVE ? "highlight_red" : ""}>{i.casual_count}</td>
<td className={i.medical_count == MEDICAL_LEAVE ? "highlight_red" : ""}>{i.medical_count}</td>


//In your style.css

.highlight_red{
 color : red;
 }

如何在创纪录的颜色React js中突出显示？

2 个答案: