基础列表穿梭框 SingleTransfer（实例演示）

<template>
  <div class="demo-block" style="width: 526px">
    <div class="demo-block-title">功能点：</div>
    <div class="demo-block-content">
      <single-transfer
        :data-source="singleDataSource"
        :target-keys="singleTargetKeys"
        @on-change="handleSingleChange"
      />
    </div>
  </div>
</template>

<script>
import * as R from "ramda";
import SingleTransfer from "transfer/SingleTransfer.vue";

const mapIndexed = R.addIndex(R.map);
const singleDataSource = mapIndexed((o, i) => {
  return {
    key: i + 1,
    title:
      i === 0 ? `选项哈哈哈哈哈哈哈哈哈哈哈哈哈嘿嘿` : `${o.title}${i + 1}`,
  };
}, R.repeat({ key: 1, title: "选项" }, 20));

export default {
  data() {
    return {
      singleDataSource,
      singleTargetKeys: [1, 3],
    };
  },
  components: {
    SingleTransfer,
  },
  methods: {
    handleSingleChange(targetKeys, data) {
      console.log("singleTransfer", targetKeys, data);
    },
  },
};
</script>

<style lang="scss"></style>

zptime / blog

基础列表穿梭框 SingleTransfer（实例演示） #3