标题前点的制作

Posted 2020-12-18 lipu12281

    {
        dataIndex: ‘state‘,
        title: formatMessage({ id: ‘approval.status‘, defaultMessage: ‘审批状态‘ }),
        render:state=> {
            const obj = APPROVAL_STATES.find(o => o.value === state) || {};
            const background = state === ‘PASS‘? ‘#52C41A‘:state === ‘SUBMITTED‘ ? ‘#1890FF‘:state === ‘REJECT‘ ? ‘#F5222D‘:‘#FAAD14‘
            const label = obj.label || ‘‘;
            return (
              <div>
                  <div className={styles.reportDot } style={{ background }} />
                  <span>{label}</span>
              </div>
            );
       },
      },

less

.reportDot {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  border: 1px solid #fff;
  margin-right: 8px;
  display: inline-block;
}