Transfer 穿梭框

基础用法

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

<script>
export default {
  data() {
    return {
      value: [],
      data: [
        { label: 'Option1', value: 'option1' },
        { label: 'Option2', value: 'option2' },
        { label: 'Option3', value: 'option3', disabled: true },
        { label: 'Option4', value: 'option4', desc: '这是个描述' },
        { label: 'Option5', value: 'option5' },
      ],
    };
  }
};
</script>

显示代码

搜索

<template>
  <div>
    <plv-transfer
      v-model="value"
      :data="data"
      search
      search-placeholder="请输入频道号搜索"
      :search-key.sync="searchKey"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      value: [],
      data: [
        { label: 'Option1', value: 'option1' },
        { label: 'Option2', value: 'option2' },
        { label: 'Option3', value: 'option3', disabled: true },
        { label: 'Option4', value: 'option4', desc: '这是个描述' },
        { label: 'Option5', value: 'option5' },
      ],
    };
  },

  watch: {
    searchKey() {
      console.log('搜索', this.searchKey);
    },
  },
};
</script>

显示代码

分页

<template>
  <div>
    <plv-transfer
      v-model="value"
      :data="data"
      search
      search-placeholder="请输入频道号搜索"
      :search-key.sync="searchKey"
      pagination
      :current-page.sync="currentPage"
      :total-page="totalPage"
      :total-count="totalCount"
      @page-change="onPageChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      value: [],
      data: [
        { label: 'Option1', value: 'option1' },
        { label: 'Option2', value: 'option2' },
        { label: 'Option3', value: 'option3', disabled: true },
        { label: 'Option4', value: 'option4', desc: '这是个描述' },
        { label: 'Option5', value: 'option5' },
      ],
      currentPage: 1,
      totalPage: 10,
      totalCount: 100,
    };
  },

  watch: {
    searchKey() {
      console.log('搜索', this.searchKey);
    },
  },

  methods: {
    onPageChange() {
      console.log('onPageChange', this.currentPage);
    }
  },
};
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
data	穿梭框数据	Array	-	[]
value	选中的绑定值，支持 v-model	Array	-	[]
leftTitle	左侧穿梭框的标题	String	-	'List'
leftEmptyText	左侧穿梭框空数据文案	String	-	'暂无内容'
rightTitle	右侧穿梭框的标题	String	-	'已选择'
rightEmptyText	右侧穿梭框空数据文案	String	-	'暂无内容'
search	显示搜索	Boolean	-	false
searchPlaceholder	搜索框占位符	String	-	-
searchKey	搜索关键词，支持 .sync	String	-	-
pagination	显示分页器	Boolean	-	false
currentPage	当前页，支持 .sync	Number	-	1
totalPage	总页数	Number	-	1
totalCount	总条数	Number	-	0
maxCount	最大选择数量	Number	-	Infinity
selectedDisabled	选择禁用	Boolean、Function	-	false

Events

事件名称	说明	回调参数
change-page	分页器页数改变后触发	-
click-checkbox	点击复选框后触发	item
close	在 Switch 关闭时触发	-