前端——》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
    )
},

将选中的值显示在一行