tree-transfer 城市选择

• 文档地址 ：gitcode.net/mirrors/hql…
• 安装 npm install el-tree-transfer --save
• 效果如下
• 城市选择组件，进行封装成公共组件，提供给相关场景进行使用

1. 新用一个组件时，最关键就是先看文档

• 需关注的参数与事件

参数	说明
from_data	源数据 Array 数据格式同element-ui tree组件，但必须有id和pid
to_data	目标数据 Array 数据格式同element-ui tree组件，但必须有id和pid
node_key	自定义node-key的值，默认为id,(即城市code值) :node_key = 'h后台返回code值'
pid	自定义pid的参数名，默认为"pid",如后台不是pid 可自定义 :pid = '后台返回值' ，第一及 pid 0 必须是数字
openAll	是否全部展开，默认关闭，展开存在性能问题

事件	说明
add-btn	点击添加按钮时触发的事件(2.4.0以前为addBtn)，function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；
remove-btn	点击移除按钮时触发的事件(2.4.0以前为removeBtn)，function(fromData,toData,obj),树形穿梭框transfer模式分别为1.移动后左侧数据，2.移动后右侧数据，3.移动的节点keys、nodes、halfKeys、halfNodes对象；
left-check-change	左侧源数据勾选事件 ，function(nodeObj, treeObj, checkAll)见el-tree组件check事件返回值, 新增checkAll参数表示是否全部选中
right-check-change	右侧目标数据勾选事件，function(nodeObj, treeObj, checkAll)见el-tree组件check事件返回值, 新增checkAll参数表示是否全部选中

方法	说明
clearChecked	清除选中节点，默认清除全部 type：string left左边 right右边 all全部 默认all
getChecked	获取选中数据
clearChecked	设置选中数据 function(leftKeys = [], rightKeys = [])
clearChecked	清除搜索框条件，默认清除全部 function(type: String) left左边 right右边 all全部 默认all

// 父组件
```
<select-city-dialog :select-city-dialog="selectCityDialog" :select-city-list="selectCityList" @emitCityCode="emitCityCode" />
```
// 子组件
<template>
  <div>
    <el-dialog
      :title="$parent.cityDialogTitle"
      :visible.sync="selectCityDialog"
      width="60%"
      class="city__style-choice"
      :before-close="closeCityDialog"
    >
      <tree-transfer
        ref="treeTransfer"
        :title="['城市列表','已选城市']"
        :from_data="$parent.cityList"
        :to_data="selectCityList"
        style="margin: 0"
        :default-props="{label:'label'}"
        node_key="value"
        :mode="mode"
        @add-btn="addCity"
        @remove-btn="removeCity"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeCityDialog">取 消</el-button>
        <el-button type="primary" @click="setWhiteCity">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import treeTransfer from 'el-tree-transfer'
export default {
  name: 'SelectCityDialog',
  components: { treeTransfer },
  props: {
    selectCityDialog: { // dialog显示 true false
      type: Boolean,
      default: false
    },
    selectCityList: { // 已选右侧数据进行回显的树结构
      type: Array,
      default: () => []
    }
    // $parent.cityList // 父组件左侧数结构数据
  },
  data() {
    return {
      mode: 'transfer',
      selectCityCode: [] // 已选城市的code
    }
  },
  watch: {
    selectCityDialog(val) {
      if (val) {
        this.$nextTick(() => {
          const cityCodeList = []
          this.filterCityCode(this.selectCityList, cityCodeList)
          this.selectCityCode = cityCodeList
        })
      }
    }
  },
  methods: {
    // 添加城市
    addCity(fromData, toData, obj) {
      this.selectCityCode = [...this.selectCityCode, ...obj.keys]
    },
    // 移除城市
    removeCity(fromData, toData) {
      this.selectCityCode = []
      const cityCodeList = []
      this.filterCityCode(toData, cityCodeList)
      this.selectCityCode = cityCodeList
    },
    // 过滤数据
    filterCityCode(dataSource, cityCodeList) {
      dataSource.forEach((item) => {
        const array = item.value
        cityCodeList.push(array)
        if (item.children) {
          this.filterCityCode(item.children, cityCodeList)
        }
      })
    },
    // 保存
    setWhiteCity() {
      this.$emit('emitCityCode', this.selectCityCode)
    },
    // 关闭dialog
    closeCityDialog() {
      this.$parent.selectCityDialog = false
    }
  }
}
</script>

<style lang="scss">
  .city__style-choice .wl-transfer .transfer-title {
    margin: 0;
  }

</style>

• 方法讲解