Transfer 穿梭框

默认穿梭框

使用 med-s-transfer 标签来定义基本的 transfer 按钮

<template>
  <div>
    <med-s-transfer
      :leftData="leftData"
      :rightData="rightData"
      :leftColumns="leftColumns"
      :rightColumns="rightColumns"
      @change="change"
    >
    </med-s-transfer>
  </div>
</template>
<script>
  const leftColumns = [
    {
      dataIndex: 'title',
      title: 'Name',
    },
    {
      dataIndex: 'description',
      title: 'Description',
    },
  ]
  const rightColumns = [
    {
      dataIndex: 'title',
      title: 'Name',
    },
  ]
  export default {
    data() {
      return {
        leftData: [],
        rightData: [],
        leftColumns,
        rightColumns,
      }
    },
    created() {
      this.leftData = this.getLeftData()
      this.rightData = this.getRightData()
    },
    methods: {
      getLeftData() {
        const leftData = []
        for (let i = 0; i < 19; i++) {
          leftData.push({
            key: 'old' + i.toString(),
            title: `旧数据${i + 1}`,
            description: `description of 旧数据${i + 1}`,
          })
        }
        return leftData
      },
      getRightData() {
        const rightData = []
        for (let i = 0; i < 19; i++) {
          rightData.push({
            key: 'right' + i.toString(),
            title: `右边数据${i + 1}`,
            description: `description of 右边数据${i + 1}`,
          })
        }
        return rightData
      },
      getNewLeftData() {
        const leftData = []
        for (let i = 0; i < 19; i++) {
          leftData.push({
            key: 'new' + i.toString(),
            title: `新数据${i + 1}`,
            description: `新数据内容${i + 1}`,
          })
        }
        this.leftData = leftData
      },
      getNewRightData() {
        const rightData = []
        for (let i = 0; i < 19; i++) {
          rightData.push({
            key: 'newRight' + i.toString(),
            title: `newRight${i + 1}`,
            description: `newRight${i + 1}`,
          })
        }
        this.rightData = rightData
      },
      change(leftArr, rightArr) {
        console.log('selectedObjs', leftArr, rightArr)
      },
    },
  }
</script>

显示代码

带搜索的穿梭框

使用 med-s-transfer 标签来定义基本的 transfer 按钮

<template>
  <div>
      <med-s-transfer
        show-search
        :filter-option="
          (inputValue, option) => option.title.indexOf(inputValue) !== -1
        "
        :titles="['左标题', '右标题']"
        :operations="['推入', '推出']"
        :leftData="leftData"
        :rightData="rightData"
        :leftColumns="leftColumns"
        :rightColumns="rightColumns"
        @change="change"
      >
      </med-s-transfer>
  </div>
</template>
<script>
  const leftColumns = [
    {
      dataIndex: 'title',
      title: 'Name',
    },
    {
      dataIndex: 'description',
      title: 'Description',
    },
  ]
  const rightColumns = [
    {
      dataIndex: 'title',
      title: 'Name',
    },
  ]
  export default {
    data() {
      return {
        leftData: [],
        rightData: [],
        leftColumns,
        rightColumns,
      }
    },
    created() {
      this.leftData = this.getLeftData()
      this.rightData = this.getRightData()
    },
    methods: {
      getLeftData() {
        const leftData = []
        for (let i = 0; i < 19; i++) {
          leftData.push({
            key: 'old' + i.toString(),
            title: `旧数据${i + 1}`,
            description: `description of 旧数据${i + 1}`,
          })
        }
        return leftData
      },
      getRightData() {
        const rightData = []
        for (let i = 0; i < 19; i++) {
          rightData.push({
            key: 'right' + i.toString(),
            title: `右边数据${i + 1}`,
            description: `description of 右边数据${i + 1}`,
          })
        }
        return rightData
      },
      getNewLeftData() {
        const leftData = []
        for (let i = 0; i < 19; i++) {
          leftData.push({
            key: 'new' + i.toString(),
            title: `新数据${i + 1}`,
            description: `新数据内容${i + 1}`,
          })
        }
        this.leftData = leftData
      },
      getNewRightData() {
        const rightData = []
        for (let i = 0; i < 19; i++) {
          rightData.push({
            key: 'newRight' + i.toString(),
            title: `newRight${i + 1}`,
            description: `newRight${i + 1}`,
          })
        }
        this.rightData = rightData
      },
      change(leftArr, rightArr) {
        console.log('selectedObjs', leftArr, rightArr)
      },
    },
  }
</script>

显示代码

带插槽的穿梭框

使用 med-s-transfer 标签来定义基本的 transfer 按钮

<template>
  <div>
      <med-s-transfer
        :leftData="leftData"
        :rightData="rightData"
        :leftColumns="leftColumns"
        :rightColumns="rightColumns"
        @change="change"
      >
        <template #footer>我是插槽</template>
      </med-s-transfer>
  </div>
</template>
<script>
  const leftColumns = [
    {
      dataIndex: 'title',
      title: 'Name',
    },
    {
      dataIndex: 'description',
      title: 'Description',
    },
  ]
  const rightColumns = [
    {
      dataIndex: 'title',
      title: 'Name',
    },
  ]
  export default {
    data() {
      return {
        leftData: [],
        rightData: [],
        leftColumns,
        rightColumns,
      }
    },
    created() {
      this.leftData = this.getLeftData()
      this.rightData = this.getRightData()
    },
    methods: {
      getLeftData() {
        const leftData = []
        for (let i = 0; i < 19; i++) {
          leftData.push({
            key: 'old' + i.toString(),
            title: `旧数据${i + 1}`,
            description: `description of 旧数据${i + 1}`,
          })
        }
        return leftData
      },
      getRightData() {
        const rightData = []
        for (let i = 0; i < 19; i++) {
          rightData.push({
            key: 'right' + i.toString(),
            title: `右边数据${i + 1}`,
            description: `description of 右边数据${i + 1}`,
          })
        }
        return rightData
      },
      getNewLeftData() {
        const leftData = []
        for (let i = 0; i < 19; i++) {
          leftData.push({
            key: 'new' + i.toString(),
            title: `新数据${i + 1}`,
            description: `新数据内容${i + 1}`,
          })
        }
        this.leftData = leftData
      },
      getNewRightData() {
        const rightData = []
        for (let i = 0; i < 19; i++) {
          rightData.push({
            key: 'newRight' + i.toString(),
            title: `newRight${i + 1}`,
            description: `newRight${i + 1}`,
          })
        }
        this.rightData = rightData
      },
      change(leftArr, rightArr) {
        console.log('selectedObjs', leftArr, rightArr)
      },
    },
  }
</script>

显示代码

参数列表

参数	方式	示例	解释
leftData	Prop	leftData="[]"	左边数据源
rightData	Prop	rightData="[]"	右边数据源
leftColumns	Prop	leftColumns="[]"	左边表头配置
rightColumns	Prop	rightColumns="[]"	右边表头配置
showClear	Prop	showClear="true"	允许清空
disabled	Prop	disabled="true"	是否禁用
selectedKeys	Prop	selectedKeys="[]"	默认选中项
showSelectAll	Prop	showSelectAll="true"	是否展示全选
footer	Slots	<template #footer>插槽</template>	底部插槽
change	Actions	@change="change"	改变后的回调函数，(leftArr, rightArr)=>{},可获得当前的左右的数据