谈谈ant-design-vue中的下拉选择框select组件的使用

ant库中的下拉选择框用户实现使用ant库中的下拉选择组件实现用户下拉选择功能解决办法使用直接手写一行行下拉框中的内容选项一选项二选项三使用与vue的v-for指令循环出下拉框中的内容{{item.value}}</a-select>//数组选项var options = [{id:0,value:"选项一"},{id:1,value:"选项二"},{id:2,value:"选项三"}

qq_43776017

21376人浏览 · 2022-03-29 20:03:40

qq_43776017 · 2022-03-29 20:03:40 发布

ant库中的下拉选择框（包括树选择组件）

用户实现

使用ant库中的下拉选择组件a-select或者树选择组件a-tree-select实现用户下拉选择功能

解决办法

使用a-select-option直接手写一行行下拉框中的内容

 <a-select>
   	<a-select-option value="0">选项一</a-select-option>
   	<a-select-option value="1">选项二</a-select-option>
   	<a-select-option value="2">选项三</a-select-option>
   </a-select>

树选择组件中
使用a-tree-select-node标签一级一级的去手动构造节点，其中，a-tree-select-node标签中可以包括a-tree-select-node标签来渲染下一级的树节点信息。

<a-tree-select
    v-model="value"
    show-search
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
  >
    <a-icon slot="suffixIcon" type="smile" />
    <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
      <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
        <a-tree-select-node key="random" value="leaf1" title="my leaf" />
        <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
      </a-tree-select-node>
      <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
        <a-tree-select-node key="random3" value="sss">
          <b slot="title" style="color: #08c">sss</b>
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select-node>
  </a-tree-select>

使用a-select-option与vue的v-for指令循环出下拉框中的内容

 <a-select>
   	<a-select-option 
                :key="item.id" 
                v-for="item in options"          
                :value="item.id"
                >{{item.value}}</a-select-option>
   	
   </a-select>
   //数组选项
   var options = [{
     id:0,
     value:"选项一"
   },{
     id:1,
     value:"选项二"
   },{
     id:2,
     value:"选项三"
   },]

使用a-select的option属性构造数组

   <template>
    <!--....... -->
    	<a-select
            :options="options"      
                  >
         </a-select>
    </template>
    
    <script>
      export default {
        data(){
          return {
            //下拉菜单的数组
            options = [{
                  id:0,
                  value:"选项一"
                },{
                  id:1,
                  value:"选项二"
                },{
                  id:2,
                  value:"选项三"
                },]
                      }
                    }
                  }
    </script>

树选择组件使用treeData属性构造节点。

结果展示
在这里插入图片描述

注意事项

使用v-for循环下拉子菜单a-select-option时，注意页面显示的是开始标签与结束标签中间插值表达式{{}}中动态渲染的值，但是它控制台打印的是每个子下拉选项的value属性对应的值；
options数组的值不一定要是一个个对象，也可以是全部都是数字或字符串，例如 [1,2,3,4]或[“a”,“b”,“c”,“d”],这样的话，注意一些细节的把控，比如每个下拉选项都必须有value属性，不然下拉选项会显示一片空白，不显示内容；
当你使用a-select的options属性时，就不要再在里面写a-select-option子标签的内容了，避免重复渲染出错；并且options数组中的每一项都要包括value属性和label属性，value属性表示显示的文本对应的值，label属性表示显示的文本内容；
ant库中的下拉选组件或者树选择组件还支持以下功能：

使用show-search 实现下拉子选项搜索功能，设置值为true，下拉框中就会出现一个搜索框来模糊匹配每一条记录对应的值，
针对树选择组件：
设置treeNodeFilterProp属性值为’title‘或者’value’，则会根据每一条节点记录（以对象形式）的title或者value来筛选节点以显示在下拉框中便于用户选择，该组件默认是根据’title‘属性模糊筛选数据中；
如果用户不满足于默认的树节点筛选属性，用户可以根据组件提供的另外一个属性’filterTreeNode‘来模糊筛选数据节点，该属性的值是用户自定义的一个回调函数如 searchNode() ,用户在输入框输入要搜索的内容中，组件调用searchNode方法，该方法默认有两个形参，即用户输入的值（input）、每条节点记录对应的节点信息(option)。根据用户选择的方式构造树节点，如果使用options属性让组件渲染出节点数据的话，则searchNode方法返回的option节点信息中要使用到的数据位于option.data.props下；如果使用手动构造节点的方式渲染出节点的话，则searchNode方法返回的options节点信息中要使用到的数据位于option.data.attrs下。对应的代码如下：
使用组件的options属性（树选择组件的treeData属性）构造节点：


//模糊搜索
    searchNode(input, option) {
      return option.data.props.name.includes(input)
    },

使用手动构造节点：


//模糊搜索
    searchNode(input, option) {
      return option.data.attrs.name.includes(input)
    },

其中组件还有一个属性allowClear可以清除当前选择的选择框值，设置后，只要选择框有值的话，选择框后面就会多一个×的符号，点击可以清除当前选择的值

使用mode 设置为 multiple 实现多选功能

使用optionLabelProp 设置值为 “value”或“label” 将对应选中的下拉项的value值或label值以标签显示在select选中框中，如果配合上面的mode属性设置值为multiple多选，可以实现新增或删除标签的功能
在这里插入图片描述
针对树选择组件：
构造子节点时，节点信息除了必要的key ,value,title等字段外，用户还可以使用插槽来动态显示下拉框的每一项节点，比如给下拉框的每一行标题前面或者后面增加一个图标。可以在数据源的每一项节点信息中加上scopedSlots:{title:‘title’},然后在模板中对应的位置增加插槽，例如：

 <template slot="title" :slot-scope="its">
              <div>
                <span v-if="its.key > 0"> <a-icon type="user" />&nbsp;&nbsp;{{ its.name }} </span>
                <span v-else-if="its.key < 0"> <a-icon type="cluster" />&nbsp;&nbsp;{{ its.name }} </span>
              </div>
            </template>