drag-select.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243
  1. <template>
  2. <div class="components-container">
  3. <el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
  4. <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  5. </el-drag-select>
  6. <div style="margin-top:30px;">
  7. <el-tag v-for="item of value" :key="item" style="margin-right:15px;">
  8. {{ item }}
  9. </el-tag>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import ElDragSelect from '@/components/DragSelect' // base on element-ui
  15. export default {
  16. name: 'DragSelectDemo',
  17. components: { ElDragSelect },
  18. data() {
  19. return {
  20. value: ['Apple', 'Banana', 'Orange'],
  21. options: [{
  22. value: 'Apple',
  23. label: 'Apple'
  24. }, {
  25. value: 'Banana',
  26. label: 'Banana'
  27. }, {
  28. value: 'Orange',
  29. label: 'Orange'
  30. }, {
  31. value: 'Pear',
  32. label: 'Pear'
  33. }, {
  34. value: 'Strawberry',
  35. label: 'Strawberry'
  36. }]
  37. }
  38. }
  39. }
  40. </script>