带你走进iView的穿梭框

我会带着你远行 2023-02-12 05:52 87阅读 0赞

双栏穿梭选择框，常用于将多个项目从一边移动到另一边。

>  Transfer 组件主要基于以下四个 API 来使用：
> 
> :data：总体数据，数组，每项为一个对象，且必须含有 key 值，组件基于此做索引。  
> :target-keys：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。  
> :render-format：每行数据显示的格式函数，默认优先显示 label 值，没有时显示 key ，可以自己组合出需要的数据格式。  
> @on-change：当点击转移按钮时，组件本身并不会转移数据，而是触发事件，由用户来操作数据。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70][]

示例如下：

<template>
      <div>
        <Transfer
          :data="unitMockData"
          :target-keys="unitTargetKeysData"
          filterable
          ref="unitTransfer"
          :list-style="listStyle"
          :render-format="render"
          :titles="unitTitles"
          :operations="operations"
          :filter-method="filterMethod"
          @on-change="handleChange">
            <div :style="{float: 'right', margin: '5px'}">
              <Button size="small">Refresh</Button>
            </div>
          </Transfer>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Transfer',
      data () {
        return {
          modalVisible: false,
          unitTitles: ['内容', '发布的内容'],
          operations: ['移除', '发布'],
          unitMockData: [
            { 'key': '10011', 'label': '内容-10011', 'desc': '111', 'disabled': false },
            { 'key': '10012', 'label': '内容-10012', 'desc': '222', 'disabled': true },
            { 'key': '10013', 'label': '内容-10013', 'desc': '333', 'disabled': false },
            { 'key': '10014', 'label': '内容-10014', 'desc': '444', 'disabled': false },
            { 'key': '10015', 'label': '内容-10015', 'desc': '555', 'disabled': false },
            { 'key': '10016', 'label': '内容-10016', 'desc': '666', 'disabled': false },
            { 'key': '10017', 'label': '内容-10017', 'desc': '777', 'disabled': false },
            { 'key': '10018', 'label': '内容-10018', 'desc': '888', 'disabled': false },
            { 'key': '10019', 'label': '内容-10019', 'desc': '999', 'disabled': false },
          ],
          unitTargetKeysData: ['10013'],
          listStyle: {
            width: '550px',
            height: '500px'
          }
        }
      },
      computed: {},
      methods: {
        render (item) {
          return item.label + ' - ' + item.desc
        },
        handleChange (newTargetKeys, direction, moveKeys) {
          if (direction === 'left') {
            // 移除
            let seqsData = this.compareArr(moveKeys, this.unitMockData, 'key')
            let seqs = ''
            for (let id of seqsData) {
              if (id === null) {
    
              } else if (seqs === '') {
                seqs = seqs + id
              } else {
                seqs = seqs + ',' + id
              }
            }
            // 删除
            console.log('移除', seqs)
          } else if (direction === 'right') {
            // 新增
            console.log('发布', moveKeys.join(','))
          }
          this.unitTargetKeysData = newTargetKeys
        },
        compareArr (arrayA, arrayB, val) {
          return arrayA.map(itemA => {
            const findItem = arrayB.find(itemB => itemB.key === itemA)
            if (val === 'key') {
              return findItem.key
            }
          })
        },
        filterMethod (data, query) {
          return data.label.indexOf(query) > -1
        }
      }
    }
    </script>
    
    <style lang="less">
    
    </style>

穿梭框高级用法，可以自定义两列的宽高、操作文案，以及底部自定义操作，更多配置见 API。

** Transfer props**

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>data</td> 
   <td>数据源，其中的数据将会被渲染到左边一栏中，<code>targetKeys</code>&nbsp;中指定的除外。</td> 
   <td>Array</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>targetKeys</td> 
   <td>显示在右侧框数据的key集合</td> 
   <td>Array</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>render-format</td> 
   <td>每行数据渲染函数，该函数的入参为&nbsp;<code>data</code>&nbsp;中的项</td> 
   <td>Function</td> 
   <td>默认显示label，没有时显示key</td> 
  </tr> 
  <tr> 
   <td>selected-keys</td> 
   <td>设置哪些项应该被选中</td> 
   <td>Array</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>list-style</td> 
   <td>两个穿梭框的自定义样式</td> 
   <td>Object</td> 
   <td>{}</td> 
  </tr> 
  <tr> 
   <td>titles</td> 
   <td>标题集合，顺序从左至右</td> 
   <td>Array</td> 
   <td>['源列表', '目的列表']</td> 
  </tr> 
  <tr> 
   <td>operations</td> 
   <td>操作文案集合，顺序从上至下</td> 
   <td>Array</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>filterable</td> 
   <td>是否显示搜索框</td> 
   <td>Boolean</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>filter-placeholder</td> 
   <td>搜索框的占位</td> 
   <td>String</td> 
   <td>请输入搜索内容</td> 
  </tr> 
  <tr> 
   <td>filter-method</td> 
   <td>自定义搜索函数，入参为 data 和 query，data 为项，query 为当前输入的搜索词</td> 
   <td>Function</td> 
   <td>默认搜索label</td> 
  </tr> 
  <tr> 
   <td>not-found-text</td> 
   <td>当列表为空时显示的内容</td> 
   <td>String</td> 
   <td>列表为空</td> 
  </tr> 
 </tbody> 
</table>

**Transfer events**

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>说明</th> 
   <th>返回值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>on-change</td> 
   <td>选项在两栏之间转移时的回调函数</td> 
   <td>targetKeys, direction, moveKeys</td> 
  </tr> 
  <tr> 
   <td>on-selected-change</td> 
   <td>选中项发生变化时触发</td> 
   <td>sourceSelectedKeys, targetSelectedKeys</td> 
  </tr> 
 </tbody> 
</table>

\--------------如果大家喜欢我的博客，可以点击左上角的关注哦。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200601143805303.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw==,size_16,color_FFFFFF,t_70