el-Transfer 穿梭框官方案例

https://element-plus.gitee.io/zh-CN/component/transfer.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

<template>
  <p style="text-align: center; margin: 0 0 20px">
    Customize data items using render-content
  </p>
  <div style="text-align: center">
    <el-transfer
      v-model="leftValue"
      style="text-align: left; display: inline-block"
      filterable
      :left-default-checked="[2, 3]"
      :right-default-checked="[1]"
      :render-content="renderFunc"
      :titles="['Source', 'Target']"
      :button-texts="['To left', 'To right']"
      :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}',
      }"
      :data="data"
      @change="handleChange"
    >
      <template #left-footer>
        <el-button class="transfer-footer" size="small">Operation</el-button>
      </template>
      <template #right-footer>
        <el-button class="transfer-footer" size="small">Operation</el-button>
      </template>
    </el-transfer>
    <p style="text-align: center; margin: 50px 0 20px">
      Customize data items using scoped slot
    </p>
    <div style="text-align: center">
      <el-transfer
        v-model="rightValue"
        style="text-align: left; display: inline-block"
        filterable
        :left-default-checked="[2, 3]"
        :right-default-checked="[1]"
        :titles="['Source', 'Target']"
        :button-texts="['To left', 'To right']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        :data="data"
        @change="handleChange"
      >
        <template #default="{ option }">
          <span>{{ option.key }} - {{ option.label }}</span>
        </template>
        <template #left-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
        <template #right-footer>
          <el-button class="transfer-footer" size="small">Operation</el-button>
        </template>
      </el-transfer>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { VNode, VNodeProps } from 'vue'

interface Option {
  key: number
  label: string
  disabled: boolean
}

const generateData = (): Option[] => {
  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(generateData())
const rightValue = ref([1])
const leftValue = ref([1])

const renderFunc = (
  h: (type: string, props: VNodeProps | null, children?: string) => VNode,
  option: Option
) => {
  return h('span', null, option.label)
}
const handleChange = (
  value: number | string,
  direction: 'left' | 'right',
  movedKeys: string[] | number[]
) => {
  console.log(value, direction, movedKeys)
}
</script>

<style>
.transfer-footer {
  margin-left: 15px;
  padding: 6px 5px;
}
</style>

$ find . "(" -name "*.html" -or -name "*.js" -or -name "*.css" -or -name "*.vue" ")" -print | xargs wc -l
   377 ./api/index.js
    13 ./App.vue
   380 ./assets/js/math.js
    21 ./assets/js/opencv.min.js
     2 ./assets/style/reset.css
   345 ./components/BaseScrollList.vue
    20 ./components/BreadCrumb.vue
   111 ./components/chartHead.vue
   104 ./components/EZUIKitJs.vue
   274 ./components/historyTab.vue
   464 ./components/Home.vue
   160 ./components/Loading.vue
   916 ./components/openGL/Fab3DTab.vue
  1016 ./components/openGL/scada3D.vue
   220 ./components/realtimeTab.vue
   316 ./components/reporterTab.vue
    57 ./components/SCADA/autoFlag.vue
    35 ./components/SCADA/availableFlag.vue
    52 ./components/SCADA/readyFlag.vue
  1088 ./components/SCADA/scadaTab.vue
   237 ./components/SCADA/scadaTmlt.vue
   101 ./components/SCADA/toggleFlag.vue
    24 ./components/svgICON.vue
    38 ./components/TreeMenu.vue
   118 ./config/index.js
    50 ./main.js
    44 ./router/dynamicRouter.js
   143 ./router/index.js
    25 ./store/index.js
    53 ./store/mutations.js
   405 ./utils/FluidLab.js
   181 ./utils/iostream.js
    81 ./utils/request.js
    45 ./utils/storage.js
   100 ./utils/svgToolset.js
   198 ./utils/utils.js
    32 ./views/404.vue
   322 ./views/Approve.vue
    29 ./views/CCR.vue
   444 ./views/Consumable.vue
   335 ./views/Dashboard.vue
   235 ./views/Dept.vue
   566 ./views/Facility.vue
   390 ./views/Factory.vue
    23 ./views/History.vue
  1215 ./views/Intro.vue
   440 ./views/Leave.vue
   177 ./views/Login.vue
   282 ./views/Menu.vue
   310 ./views/Mon.vue
    24 ./views/ochart.vue
   129 ./views/Password.vue
   271 ./views/Record.vue
    23 ./views/Reporter.vue
   321 ./views/Role.vue
    33 ./views/SCADA.vue
   357 ./views/Tube.vue
   470 ./views/User.vue
   348 ./views/Vheicle.vue
    34 ./views/Web3D.vue
    53 ./views/Welcome.vue
    32 ./views/Wellsun.vue
   218 ./views/yourTubes.vue
 14927 total