十七.Transfer

前言

组件ui修改，原功能不变，具体用法可以参考之前案例

默认

列表 1 0/15

Option 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8Option 9Option 10Option 11Option 12Option 13Option 14Option 15

无数据

列表 2 0/0

无数据

<template>
    <web-transfer v-model="value" :data="data" />
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  
  interface Option {
    key: number
    label: string
    disabled: boolean
  }
  
  const generateData = () => {
    const data: Option[] = []
    for (let i = 1; i <= 15; i++) {
      data.push({
        key: i,
        label: `Option ${i}`,
        disabled: i % 4 === 0,
      })
    }
    return data
  }
  
  const data = ref<Option[]>(generateData())
  const value = ref([])
  </script>

级联面板

暂无数据

已选内容

暂无数据

<template>
  <web-transfer-cascader-panel :selectData="[]" v-model="value" :data="data" :requestSelect="requestSelect" :requestTree="requestTree" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
  key: number
  label: string
  disabled: boolean
}
const requestSelect = () => {
  return []
}
const requestTree = () => {
  return []
}

const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 15; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: i % 4 === 0,
    })
  }
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([[], [], [], 2])
</script>