选择框的使用

选择框的基本使用

checkbox多选框

1. 基本使用

   <a-checkbox-group @change="checkChange">

      <a-checkbox v-for="(item, index) in list" :key="index" :value="item">

        {{ item }}

      </a-checkbox>

    </a-checkbox-group>

  methods: {

    checkChange(val) {

      console.log(val)

    }

  }

每次框里的勾选发生变化，都可以通过a-check-group上的change事件拿到最新被选择的值，拿到的是一个数组，存放的是与a-checkbox绑定的value

2.支持全选的checkbox

    <div class="checkALL">

      <a-checkbox :checked="checkAll" @change="onAllChange">全选</a-checkbox

      ><br />

      <a-checkbox-group

        v-model="checkedList"

        :options="list"

        @change="onChange"

      ></a-checkbox-group>

    </div>

  list: ['北京', '上海', '广州', '深圳'],
      checkedList: [],
      checkAll: false

   onChange(checkedArr) {

      this.checkAll = checkedArr.length === this.list.length

    },

    onAllChange(e) {

      Object.assign(this, {

        checkedList: e.target.checked ? this.list : [],

        checkAll: e.target.checked

      })

​ }

select下拉选择器

1.基本使用

      <a-select @change="changeSelected" style="width:200px">
        <a-select-option
          v-for="(item, index) in list"
          :key="index"
          :value="item"
        >
          {{ item }}
        </a-select-option>
      </a-select>

   changeSelected(val) {
      console.log(val)
    }

拿到的是最新选择项所绑定的value

2.带模糊搜索功能的下拉选择框

  <a-select
    show-search
    :value="value"
    placeholder="请输入搜索内容"
    style="width: 200px"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :not-found-content="null"
    @search="handleSearch"
    @change="handleChange"    
       <a-select-option v-for="d in data" :key="d.value">
          {{ d.text }}
       </a-select-option>
  </a-select>

在search事件中发送请求； 在change事件中选中了选项

cascader级联选择器

<a-cascader :options="options" placeholder="Please select" @change="onChange" />

数据格式:

options: [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ],

change事件拿到值

  onChange(value) {
      console.log(value);
    },

tree树形控件

  <a-tree
    v-model="checkedKeys"
    checkable
    :expanded-keys="expandedKeys"
    :auto-expand-parent="autoExpandParent"
    :selected-keys="selectedKeys"
    :tree-data="treeData"
    @expand="onExpand"
    @select="onSelect"
  />

数据格式:

const treeData = [
  {
    title: '0-0',
    key: '0-0',
    children: [
      {
        title: '0-0-0',
        key: '0-0-0',
        children: [
          { title: '0-0-0-0', key: '0-0-0-0' },
          { title: '0-0-0-1', key: '0-0-0-1' },
          { title: '0-0-0-2', key: '0-0-0-2' },
        ],
      },
    ],
  }
];