如图所示，在antdv的表格中，有涉及到下拉多选的需求，并且将选中的结果在单元格内一行展示，鼠标滑动观之。
表格单元格的代码
<template slot="editMorning" slot-scope="node">
<a-select :dropdownMatchSelectWidth="true" :filter-option="filterOption" @change="onCellChange(node.AM, $event)" mode="multiple" :showArrow="false" :options="node.AM.staffOptions" :default-value="node.AM.staffChooses" style="width: 110px"/>
</template>
上面的属性稍微解释一下：
| 属性 | 释义 |
|---|---|
| mode=“multiple” | 多选 |
| :dropdownMatchSelectWidth=“true” | 下拉菜单和选择器同宽 |
| :filter-option=“filterOption” | 对输入的内容进行筛选过滤，filterOption是方法名 |
| @change=“onCellChange(node.AM, $event)” | 下拉框值改变事件，$event是下拉框已选择的值（包括本次点击选中） |
| :showArrow=“false” | 是否显示下拉小箭头（我这里写的否，因为我感觉下拉箭头不美观） |
| :options=“node.AM.staffOptions” | 下拉框中的选项，一般是[{label:姓名,value:1}]格式的 |
| :default-value=“node.AM.staffChooses” | 已选中的值，一般是[1,2,3]格式的 |
// 下拉框赋值等常规操作就不说了
// 下拉框值改变事件
onCellChange (node, value) {
const dataSource = [...this.queryResult]
// 找到表格中这一行这一个单元格的值
let target
dataSource.forEach(record => {
if (record[node.date][(node.timeInterval === 'AM' ? 'AM' : 'PM')].index === node.index) {
target = record[node.date][(node.timeInterval === 'AM' ? 'AM' : 'PM')]
}
})
if (target) {
// 值替换
target['staffIds'] = value
this.queryResult = dataSource
}
},
// 下拉框搜索过滤
filterOption (input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
)
},
将选中的值显示在一行
<style>
.ant-select-selection--multiple .ant-select-selection__rendered {
margin-left: 5px;
margin-bottom: -3px;
height: auto;
max-height: 30px;
max-width: 200px;
overflow: auto;
overflow-y: hidden;
}
.ant-select-selection--multiple .ant-select-selection__choice {
overflow: initial;
}
.ant-select ul,
.ant-select ol {
display: flex;
}
.ant-select-selection--multiple > ul > li,
.ant-select-selection--multiple .ant-select-selection__rendered > ul > li {
margin-top: 3px;
height: 22px;
line-height: 22px;
font-size: 14px;
width: auto;
max-height: 200px;
}
.ant-select-search--inline .ant-select-search__field__wrap {
max-width: 50px !important;
}
.ant-select-selection__rendered::-webkit-scrollbar {
height: 5px;
}
.ant-select-selection__rendered::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: lightskyblue;
}
.ant-select-selection__rendered::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
border-radius: 10px;
background: #ededed;
}
</style>