工作笔记ft(bug整理-修改组件源码)：行政区划VtxZtreeSelect没有maxTagCount类似属性，导致选中过多时，样式错乱

本文链接：https://blog.csdn.net/weixin_37203203/article/details/128798082

antd4环境下

<Form.Item

label=" 行政区划"

name="divisionIds"

initialValue={[initialDivisionId]}

getValueFromEvent={({ nodes, keys, leafKeys, names }) => {

actOpByDivisionId(keys?.length > 0 ? keys : [initialDivisionId]);

console.log('keys', keys, initialDivisionId);

return keys;

}}

<VtxZtreeSelect

data={test(divisionTree)}

treeDefaultExpandAll={true}

treeCheckable

multiple

// allowClear={false}

placeholder="请选择行政区划"

style={{

width: '400px',

}}

maxTagCount={5}

refreshFlag={flag}//改变initialValue时，树没变，要用refreshFlag刷新一下

</Form.Item>

复制出组件源码，在多选组件处加上限制选中数目

// 多选组件

const MultiSelect = (

<div

className={classnames('ant-input', `${prefixCls}-multiple`, {

[`${prefixCls}-multiple-disabled`]: disabled,

})}

style={{ height: 'auto', minHeight: '28px', ...style }}

{selectedNodes.length > 0 ? (

t.props.maxTagCount && selectedNodes.length > t.props.maxTagCount ? (

[

selectedNodes?.slice(0, t.props.maxTagCount).map(item => (

<Tag

key={item.id}

closable={!disabled}

onClose={e => {

e.stopPropagation();

t.clearKey(item.id);

}}

{item.name.length > 20

? `${item.name.slice(0, 20)}...`

: item.name}

</Tag>

)),

<Tag

key={'item.id'}

closable={disabled}

// onClose={e => {

// e.stopPropagation();

// t.clearKey(item.id);

// }}

...

</Tag>,

disabled ? null : (

// <Icon

// key={'icon'}

// className={`${prefixCls}-multiple-close-icon`}

// type="close-circle"

// theme="filled"

// onClick={e => {

// e.stopPropagation();

// t.clear();

// }}

// />

<CloseCircleOutlined

style={{ color: 'rgba(0,0,0,0.6)' }}

className={`${prefixCls}-multiple-close-icon`}

onClick={e => {

e.stopPropagation();

t.clear();

}}

]

) : (

[

selectedNodes.map(item => (

<Tag

key={item.id}

closable={!disabled}

onClose={e => {

e.stopPropagation();

t.clearKey(item.id);

}}

{item.name.length > 20

? `${item.name.slice(0, 20)}...`

: item.name}

</Tag>

)),

disabled ? null : (

<Icon

key={'icon'}

className={`${prefixCls}-multiple-close-icon`}

type="close-circle"

theme="filled"

onClick={e => {

e.stopPropagation();

t.clear();

}}

]

)

) : (

<span className={`${prefixCls}-placehoder`}>{t.props.placeholder}</span>

)}

</div>

);