当前位置：首页 > news >正文

ant-design 自定义选择框

news 2025/11/22 14:18:56

效果图：
在这里插入图片描述

  useEffect(() => {getSelectBgColor();}, []);{title: '资产状态',dataIndex: 'elementStatus',align: 'center',editable: false,width: 120,renderFormItem: () => (<Selectplaceholder="请选择"defaultValue={queryElementStatus}mode="multiple"onDeselect={deleteSelect}tagRender={tagRender}>{statusSelectInfo.map((item) => (<Select.Option key={item.remark} value={item.status}>{item.remark}<divstyle={{height: '10px',width: '10px',borderRadius: '3px',marginRight: '8px',background: item.color[0],}}/></Select.Option>))}</Select>),render: (_, record) => renderElementStatusTag1(record.elementStatus),},function getSelectBgColor() {const statusObj = JSON.parse(localStorage.getItem('assetsStatus')) || {1: {remark: '未知',longRemark: '资产不属于预设的几种情况之一',},//其他的略};let statusList = convertToObjectArray(statusObj, colorObj);setStatusSelectInfo(statusList);}function convertToObjectArray(params) {if (!params) {console.log('params is undefined or null');return []; // 如果 params 是 undefined 或 null，返回空数组}const result = [];// 使用 Object.keys 来遍历 params 的键Object.keys(params).forEach((key) => {const status = parseInt(key, 10); // 将字符串键转换为整数const color = colorObj[status].split(',') || 'default'; // 尝试从 colorObj 中获取颜色，如果失败则使用默认值const { remark, longRemark } = params[key]; // 解构出 remark 和 longRemark// 将这些信息添加到结果数组中result.push({ status, color, remark, longRemark });});return result;}function removeElementStatus(arr, value) {const index = arr.indexOf(value);if (index !== -1) {arr.splice(index, 1);}}// 在筛选区域中，删除资产类型多选某一选项const deleteSelect = (str) => {let localStatus = getLocalItem('initQueryStatus');if (localStatus && localStatus?.length && localStatus?.includes(str)) {removeElementStatus(localStatus, str);setLocalItem('initQueryStatus', localStatus);}};const tagRender = (props) => {const { label, value, closable, onClose } = props;const onPreventMouseDown = (event) => {event.preventDefault();event.stopPropagation();};let item = {};if (queryElementStatus?.length) {item.color = colorObj[value].split(',');} else {item = statusSelectInfo.find((e) => e.status === value);}return (<Tagstyle={{marginInlineEnd: 4,color: item.color[0],background: item.color[1],borderColor: item.color[2],}}onMouseDown={onPreventMouseDown}closable={closable}onClose={onClose}>{label[0]}</Tag>);};const colorObj = {1: '#d46b08,#fff7e6,#ffd591', //黄色2: '#34C759,#f2ffe9,#33c97a', //绿色3: '#d46b08,#fff7e6,#ffd591',4: '#FF3B30,#fff1f0,#ffa39e', //红色5: '#ff5100,#fff2c9,#ffd857', //紫色6: '#8E8E93,#f4f4f5,#c8c9cc', //灰色7: '#8E8E93,#f4f4f5,#c8c9cc',8: '#ff5100,#fff2c9,#ffd857',10: '#409EFF,#ecf5ff,#a0cfff', //蓝色11: '#8E8E93,#f4f4f5,#c8c9cc',12: '#409EFF,#ecf5ff,#a0cfff',13: '#ff5100,#fff2c9,#ffd857',14: '#8E8E93,#f4f4f5,#c8c9cc',15: '#ff5100,#fff2c9,#ffd857',
};