帶你走進iView的穿梭框

雙欄穿梭選擇框，常用於將多個項目從一邊移動到另一邊。

 Transfer 組件主要基於以下四個 API 來使用：

:data：總體數據，數組，每項爲一個對象，且必須含有 key 值，組件基於此做索引。
:target-keys：目標列索引集合，數組，每項爲數據的 key 值，Transfer 會將含有這些 key 值的數據篩選到右邊。
:render-format：每行數據顯示的格式函數，默認優先顯示 label 值，沒有時顯示 key ，可以自己組合出需要的數據格式。
@on-change：當點擊轉移按鈕時，組件本身並不會轉移數據，而是觸發事件，由用戶來操作數據。

示例如下：

<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

屬性	說明	類型	默認值
data	數據源，其中的數據將會被渲染到左邊一欄中，targetKeys 中指定的除外。	Array	[]
targetKeys	顯示在右側框數據的key集合	Array	[]
render-format	每行數據渲染函數，該函數的入參爲 data 中的項	Function	默認顯示label，沒有時顯示key
selected-keys	設置哪些項應該被選中	Array	[]
list-style	兩個穿梭框的自定義樣式	Object	{}
titles	標題集合，順序從左至右	Array	['源列表', '目的列表']
operations	操作文案集合，順序從上至下	Array	[]
filterable	是否顯示搜索框	Boolean	false
filter-placeholder	搜索框的佔位	String	請輸入搜索內容
filter-method	自定義搜索函數，入參爲 data 和 query，data 爲項，query 爲當前輸入的搜索詞	Function	默認搜索label
not-found-text	當列表爲空時顯示的內容	String	列表爲空

Transfer events

事件名	說明	返回值
on-change	選項在兩欄之間轉移時的回調函數	targetKeys, direction, moveKeys
on-selected-change	選中項發生變化時觸發	sourceSelectedKeys, targetSelectedKeys

 

--------------如果大家喜歡我的博客，可以點擊左上角的關注哦。