前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >el-Transfer 穿梭框官方案例

el-Transfer 穿梭框官方案例

作者头像
周星星9527
发布2022-05-16 21:08:30
1.1K0
发布2022-05-16 21:08:30
举报
文章被收录于专栏:javascript趣味编程

原文:

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

效果

代码:

代码语言:javascript
复制
<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>

我的代码:

代码语言:javascript
复制
$ 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
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-04-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 传输过程数值模拟学习笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档