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

效果

如图所示，在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>
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
    )
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

将选中的值显示在一行

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50