iview常用组件说明

总结一下工作中用到的一些组件使用方法

1.下拉框-一般情况
- v-model 绑定选中Option中的 :label (清除时重置model就行了)
- label-in-value 在on-change函数中可以以对象的形式返回value和label
- filterable 是否支持搜索
- on-change Opeion改变后触发的回调函数

<Select
  v-model="title"
  label-in-value
  filterable
  @on-change='titleChange'>
  <Option
    v-for="(item, key) in titleList" 
    :value="JSON.stringify(item)" 
    :label="item.title"
    :key="key">
      {{ item.title }}
    </Option>
</Select>

2.下拉框-远程搜索
- remote 是否使用远程搜索
- loading 当前是否正在远程搜索(bool)
- :remote-method 远程搜索的方法(请求到数据更新titleList)
- 其他属性和上面一样

<Select
  v-model="title"
  filterable
  label-in-value
  remote
  placeholder="输入关键字进行搜索"
  @on-change="titleChange"
  :remote-method="titleSreach"
  :loading="loading">
  <Option 
    v-for="(item, key) in titleList" 
    :value="JSON.stringify(item)"
    :label="item.title"
    :key="key">
    {{ item.title }}
  </Option>
</Select>

• titleList 示例

titleList: [
  {
    value: 'New York',
    title: 'New York'
  },
  {
    value: 'London',
    title: 'London'
  }]

3.Cascader 级联选择
- v-model 绑定选中的数据，注意这里的value一定是数组
- :data 数据源
= trigger 触发事件
- @on-change 回调函数 返回值 value 即已选值 value，selectedData 为已选项的具体数据

<Cascader 
  v-model="value"
  :data="data" 
  trigger="hover" 
  @on-change="dataChange">
</Cascader>

• :data数据源示例

data: [{
  value: 'beijing',
  label: '北京',
  children: [
  {
    value: 'gugong',
    label: '故宫'
  },
  {
    value: 'tiantan',
    label: '天坛'
  }]
}]