element ui 穿梭框支持树形结构(仅支持2层)-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui 穿梭框支持树形结构(仅支持2层)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

elementui 穿梭框树结构,vue,ui,vue.js,javascript

代码如下

<div class="el-transfer flex-space-between-center padding-0-20">
      <div class="el-transfer-panel">
        <p class="el-transfer-panel__header">
          <el-checkbox
            v-model="leftObj.checkAll"
            :indeterminate="leftObj.isIndeterminate"
            :disabled="leftObj.allCount === 0"
            @change="(val) => checkboxChange(val, 'leftObj')"
          >全部城市</el-checkbox>
          <span class="count-float-right">{{ leftObj.chooseCount }}/{{ leftObj.allCount }}</span>
        </p>
        <div class="el-transfer-panel__body">
          <div v-if="!leftObj.treeData.length" class="el-transfer-panel__empty">无数据</div>
          <el-tree
            v-else
            :ref="leftObj.treeRef"
            class="transfer-tree"
            :data="leftObj.treeData"
            show-checkbox
            node-key="code"
            :props="defaultProps"
            @check-change="checkLeftChange"
          />
        </div>
      </div>
      <div class="el-transfer__buttons">
        <el-button type="primary" icon="el-icon-arrow-left" :disabled="rightObj.chooseCount === 0" @click="goToOpposite('rightObj', 'leftObj')" />
        <el-button type="primary" icon="el-icon-arrow-right" :disabled="leftObj.chooseCount === 0" @click="goToOpposite('leftObj', 'rightObj')" />
      </div>
      <div class="el-transfer-panel">
        <p class="el-transfer-panel__header">
          <el-checkbox
            v-model="rightObj.checkAll"
            :indeterminate="rightObj.isIndeterminate"
            :disabled="rightObj.allCount === 0"
            @change="(val) => checkboxChange(val, 'rightObj')"
          >已选城市</el-checkbox>
          <span class="count-float-right">{{ rightObj.chooseCount }}/{{ rightObj.allCount }}</span>
        </p>
        <div class="el-transfer-panel__body">
          <div v-if="!rightObj.treeData.length" class="el-transfer-panel__empty">无数据</div>
          <el-tree
            v-else
            :ref="rightObj.treeRef"
            class="transfer-tree"
            :data="rightObj.treeData"
            show-checkbox
            node-key="code"
            default-expand-all
            :props="defaultProps"
            @check-change="checkRightChange"
          />
        </div>
      </div>
    </div>

checkboxChange(checkAll, attr) {
      const ref = this[attr].treeRef
      if (!checkAll) {
        this.$refs[ref].setCheckedKeys([])
      } else {
        this.$refs[ref].setCheckedKeys(this[attr].totalChooseIdList)
      }
    },
    goToOpposite(fromAttr, toAttr) {
      // console.log(this.$refs.leftTreeData.getHalfCheckedNodes())
      if (this[fromAttr].checkAll) {
        this[toAttr].treeData = JSON.parse(JSON.stringify(this.treeList))
        this[fromAttr].treeData = []
      } else {
        // console.log(this.$refs.leftTreeData.getCheckedNodes())
        const ref = this[fromAttr].treeRef
        const list = this.$refs[ref].getCheckedNodes()
        const halfList = this.$refs[ref].getHalfCheckedNodes()
        const result = []
        list.forEach(i => {
          const item = this.treeList.find(chi => {
            return chi.code === i.code
          })
          if (item) {
            result.push(i)
          }
        })
        if (halfList.length) { // 有半选的，说明选了子级别的一个
          const keys = this.$refs[ref].getCheckedKeys()
          halfList.forEach(item => {
            const obj = {
              code: item.code,
              label: item.label,
              children: []
            }
            item.children.forEach(child => {
              if (keys.indexOf(child.code) > -1) {
                obj.children.push(child)
              }
            })
            result.push(obj)
          })
        }
        this[fromAttr].treeData = this.reduceDataByArr(this[fromAttr].treeData, result)
        this[toAttr].treeData = this.reduceDataByArr(this.treeList, this[fromAttr].treeData)
      }
      this[fromAttr].checkAll = false
      this[fromAttr].isIndeterminate = false
      this.$refs[this[fromAttr].treeRef].setCheckedKeys([])
      this.getTotalChooseIdList(fromAttr)
      this.getTotalChooseIdList(toAttr)
    },
    reduceDataByArr(initialList, optList) {
      const copyList = JSON.parse(JSON.stringify(initialList))
      const arr = []
      copyList.forEach(city => {
        const item = optList.find(i => i.code === city.code)
        if (!item) {
          arr.push(city)
        } else if (item.children && item.children.length) {
          const childList1 = JSON.parse(JSON.stringify(city.children))
          const childList2 = JSON.parse(JSON.stringify(item.children))
          const ch3List = []
          childList1.forEach(ch1 => {
            const ch1item = childList2.find(j => j.code === ch1.code)
            if (!ch1item) {
              ch3List.push(ch1)
            }
          })
          if (ch3List.length) {
            arr.push({
              ...city,
              children: ch3List
            })
          }
        }
      })
      return arr
    },
    checkLeftChange() {
      this.treeCheckChange('leftObj')
    },
    checkRightChange() {
      this.treeCheckChange('rightObj')
    },
    treeCheckChange(attr) {
      const ref = this[attr].treeRef
      const chooseList = this.$refs[ref].getCheckedKeys()
      const arr = []
      chooseList.forEach(i => {
        if (this[attr].totalChooseIdList.indexOf(i) > -1) {
          arr.push(i)
        }
      })
      this[attr].chooseCount = arr.length
      this[attr].checkAll = this[attr].chooseCount === this[attr].allCount
      this[attr].isIndeterminate = this[attr].chooseCount > 0 && !this[attr].checkAll
    },
    getTotalChooseIdList(attr) {
      const arr = []
      this[attr].treeData.forEach(i => {
        if (i.children && i.children.length) {
          i.children.forEach(child => {
            arr.push(child.code)
          })
        } else {
          arr.push(i.code)
        }
      })
      this[attr].totalChooseIdList = arr
      this[attr].allCount = arr.length
      this[attr].chooseCount = 0
    },
const leftObj = {
        totalChooseIdList: [],
        checkAll: false,
        isIndeterminate: false,
        chooseCount: 0,
        allCount: 0,
        treeData: [],
        treeRef: 'leftTreeData'
      }
const rightObj = {
        checkAll: false,
        isIndeterminate: false,
        chooseCount: 0,
        allCount: 0,
        treeData: [],
        totalChooseIdList: [],
        treeRef: 'rightTreeData'
      }

文章来源地址https://www.toymoban.com/news/detail-850912.html

到了这里，关于element ui 穿梭框支持树形结构(仅支持2层)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！