组件-Element—Transfer（穿梭框）

最新推荐文章于 2024-08-09 14:41:31 发布

ForeverJPB.

最新推荐文章于 2024-08-09 14:41:31 发布

阅读量2.3k

点赞数

分类专栏：组件---Element 文章标签： Element

本文链接：https://blog.csdn.net/GU_AO_SHI_TAI_DU/article/details/94564609

版权

本文主要介绍了Element UI中Transfer（穿梭框）组件的使用，包括基础用法、可搜索功能、自定义操作以及数据项属性别名。同时详细列出了组件的Attributes、Slot、Scoped Slot、Methods和Events，为开发者提供了全面的参考。

摘要由CSDN通过智能技术生成

组件-Element—Transfer（穿梭框）

组件—穿梭框

基础用法
在这里插入图片描述

<template>
  <el-transfer v-model="value" :data="data"></el-transfer>
</template>

<script>
  export default {
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        data: generateData(),
        value: [1, 4]
      };
    }
  };
</script>

可搜索
在这里插入图片描述

<template>
  <el-transfer
    filterable
    :filter-method="filterMethod"
    filter-placeholder="请输入城市拼音"
    v-model="value"
    :data="data">
  </el-transfer>
</template>

<script>
  export default {
    data() {
      const generateData = _ => {
        const data = [];
        const cities = ['上海', '北京', '广州&