ant-design-vue/components/vc-select/demo/multiple-readonly.vue

<script>
import Select, { Option } from '../index'
import '../assets/index.less'
import { fetch } from './tbFetchSuggest'

export default {
  data () {
    return {
      data: [],
      value: ['b11'],
    }
  },
  methods: {
    onChange (value) {
      console.log('onChange ', value)
      this.value = value
    },
    onSelect (value) {
      console.log('select ', value)
    },
    fetchData (value) {
      fetch(value, (data) => {
        this.data = data
      })
    },
  },

  render () {
    const children = []
    for (let i = 10; i < 36; i++) {
      // 11 => readonly selected item
      children.push(<Option disabled={i === 11} key={i.toString(36) + i}>中文{i}</Option>)
    }
    const dropdownMenuStyle = {
      maxHeight: '200px',
    }
    return (<div>
      <h2>multiple readonly default selected item</h2>
      <div>
        <Select
          multiple
          value={this.value}
          animation='slide-up'
          choiceTransitionName='rc-select-selection__choice-zoom'
          dropdownMenuStyle={dropdownMenuStyle}
          style={{ width: '500px' }}
          optionFilterProp='children'
          optionLabelProp='children'
          placeholder='please select'
          onChange={this.onChange}
        >
          {children}
        </Select>
      </div>
    </div>)
  },
}
</script>