前端——》ant-design-vue组件的使用之二（a-select复选框的搜索与样式优化）

效果

如图所示，在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>