antd中的组件cascader用于联级选择,但是只支持单选，在项目过程中经常会遇到多选的情况。这边将多选情况进行总结，以及附上实现代码。
antd实现的单选功能如下：https://3x.ant.design/components/cascader-cn/
多选一般有两种情况：
1. 支持所有二级的多选
2.支持任意多级的多选
代码实现如下：
1.支持所有二级的多选
【一级/二级， 一级/二级，..........】
配置内容：
{
type: 'levelTwoCascaders',
label: '转诊原因',
key: 'referralReason',
defaultValue: [],
selectedValue: selectedValue, // 选中的值【value1, value2】
selectedRelation: selectedRelation, // 选择值的值和文本对应关系 【[value1,text1], [value2, text2]】
changeHandle: this.changeHandle,
deleteChangeHandle: this.deleteChangeHandle,
options: options
}
对于levelTwoCascaders的实现：
// 联级选择（二级选择的多选）
levelTwoCascaders: value => {
const { changeHandle, options, selectedValue, selectedRelation, deleteChangeHandle } = value
return (
<div>
<Cascader
allowClear={false}
options={options}
value={selectedValue}
onChange={(itemValue, itemInitial) => {
// 没有该值时，进行加入
// itemValue -> [一级value, 二级value], itemInitial -> [{label: 一级label, value: 一级value, children: []}, {label: 二级label, value: 二级value}]
if (!(selectedValue.includes(itemValue[1]))) {
// 展示的值为一级/二级的格式
const showValue = itemValue.reduce(
(previousValue, currentValue, currentIndex) => currentIndex ? previousValue + '/' + itemInitial[currentIndex]['label']
: previousValue + itemInitial[currentIndex]['label'],
''
)
changeHandle(itemValue[1], showValue)
}
}}
>
<div style={{
// 设置最大高度，当内容过多时进行滚动显示
maxHeight: '60px',
height: selectedValue.length === 0 && '30px',
overflow: 'auto',
border: '1px solid #d9d9d9',
borderRadius: '4px'
}}> {(selectedRelation || []).map((item, index) => {
return (
<Tag
closable
key={item[0]}
onClose={(e) => {
// 删除对应索引元素
deleteChangeHandle(index)
}}
>
{item[1]}
</Tag>
)
})}</div>
</Cascader>
</div>
)
},
对于changeHandle, deleteChangeHandle的实现
changeHandle = (value, text) => {
// 选中元素
const handleArray = [value, text]
const { selectedValue, selectedRelation } = this.state
selectedValue.push(value)
selectedRelation.push(handleArray)
this.setState({
selectedValue,
selectedRelation
})
}
deleteChangeHandle = (index) => {
// 删除元素
const { selectedValue, selectedRelation } = this.state
selectedValue.splice(index, 1)
selectedRelation.splice(index, 1)
this.setState({
selectedValue,
selectedRelation
})
}
2.支持任意级数的多选
【一级， 一级， 一级/二级， 一级/二级/三级，一级/二级，...........】
内容配置如下：
{
type: 'multipleCascaders',
key: 'areaidList',
label: '区域名称',
onchangeValue: this.changeValue,
onchangevalueCode: this.changeCode,
className: 'cascaderMaxHeight',
nowvalue: this.state.areaValue,
valueLabel: this.state.valueCode,
loadData: this.loadCascadeData, // 选择框的内容为动态加载
changeOnSelect: true,
options: addressList
},
multipleCascaders的实现如下：
// 下面引用的方法引入于lodash-es import { get, reduce, includes, filter } from 'lodash-es'
multipleCascaders: value => { const { loadData, onchangeValue, onchangevalueCode, changeOnSelect, options = [], nowvalue = [] } = value // 根据数据拿到code的组合 const connectCode = (arr = []) => reduce(arr, (ss, vv) => (!ss ? vv.value : `${ss}-${vv.value}`), '') // 根据数据得到label的组合 const connectLabel = (arr = []) => reduce(arr, (ss, vv) => (!ss ? vv.label : `${ss}-${vv.label}`), '') const allCode = reduce(nowvalue, (ss, vv) => [...ss, get(vv, [vv.length - 1, 'curCode'])], []) return ( <div> <Cascader allowClear={false} options={options} value={nowvalue} loadData={loadData} changeOnSelect={changeOnSelect} onChange={(v, l) => { const curCode = connectCode(l) // 将code记录一下 const curLabel = connectLabel(l) l[l.length - 1].curCode = curCode l[l.length - 1].curLabel = curLabel // 已有的，不允许再选 // 如果当前curCode含有nowvalue的值，则需要进行删除掉多余数据 if (!includes(allCode || [], curCode)) { allCode.map((item, index) => { if (curCode.includes(item)) { allCode.splice(index, 1) nowvalue.splice(index, 1) } }) onchangeValue([...nowvalue, l]) onchangevalueCode([...allCode, curCode]) } }} > <div style={{ maxHeight: '60px', height: nowvalue.length === 0 && '30px', overflow: 'auto', border: '1px solid #d9d9d9', borderRadius: '4px' }} > {(nowvalue || []).map((v, i) => { return ( <Tag closable key={get(v, [v.length - 1, 'curCode'])} onClose={() => { onchangeValue(filter(nowvalue, (vv, ii) => ii !== i)) onchangevalueCode(filter(allCode, (vv, ii) => ii !== i)) }} > {get(v, [v.length - 1, 'curLabel'])} </Tag> ) })}{' '} </div> </Cascader> </div> ) },
其中nowvalue是选中数据的具体数据，
allcode表示具体选中数据的code表示
['110000-110100', '110000', '120000-120100-120101', '120000-120100-120102']
具体实现思路也是： 将选中的内容需要保存的内容进行保存，需要注意的是 已经选过的内容不可再次选择，选中二级后需要将一级内容删除
完结：总之，具体思路都是将自己需要的内容进行保存，将后端需要的格式进行处理，然后保证正常的显示就可。
标签：const,多选,value,label,vv,Cascader,antd,selectedRelation,selectedValue From： https://www.cnblogs.com/best-mll/p/16911297.html