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>