element-ui 树形控件实现 三级联动穿梭框

使用树形控件实现，详情看文档 https://element.eleme.cn/#/zh-CN/component/tree

<template>
  <div class="container">
    <div class="trees">
      <div class="treeP">

        <p class="titles">
          <label class="la">
            <span>
            </span>
          </label>
        </p>

        <div class="tree1">
          <el-tree
            ref="tree"
            v-loading="listLoading"
            :data="data"
            show-checkbox
            expand-on-click-node
            :check-on-click-node="true"
            node-key="id"
            @check="handleCheckChange"
          />
        </div>
      </div>

      <div class="btn">
        <el-button type="primary" icon="el-icon-arrow-right" circle />
      </div>

      <div class="treeP">
        <p class="titles">
          <label>
            <span @click="quit">
              清空
            </span>
          </label>
        </p>
        <div class="tree1">
          <el-tree
            :data="data1"
            node-key="id"
            draggable
            :expand-on-click-node="true"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>{{ data.brand }} {{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
                >
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </div>

    </div>

    <!-- 按钮 -->
    <div slot="footer" class="dialog-footer">
      <p style="margin: 20px;" />
      <el-button style="margin-left: 80.5%;" @click="cancel">取 消</el-button>
      <el-button type="primary" @click="updata">确 定</el-button>
    </div>

  </div>
</template>

<script>
import api from '@/api/product'
export default {
  name: 'Shuttle',
  props: ['type', 'film_id'],
  data() {
    return {
      listLoading: false,
      checked: false,
      data1: [],
      data: [],
      echo: {
        strId: '',
        name: []
      }
    }
  },
  created() {
    this.listLoading = true
    const data = this.film_id !== undefined ? this.film_id　: ''
    api.getTreeList({ film_id: data }).then(res => {
      this.data = res.data
      this.listLoading = false
    })
  },
  methods: {
    // 删除
    remove(node, data) {
      // 清除选中
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)

      // 取消勾中
      this.$refs.tree.setChecked(data.id, false)
    },

    // 全删
    quit() {
      this.data1 = []
      this.$refs.tree.setCheckedKeys([])
    },

    // 添加
    handleCheckChange(data, checked) {
      this.data1 = []
      checked.checkedNodes.forEach((item, index) => {
        if (item.children === undefined || item.children.length === 0) {
          item.brand = this.clean(this.data, item.id)
          this.data1.push(item)
        }
      })
      // console.log(this.data1)
    },
	
	// 添加系列
    clean(data, id) {
      let name = ''
      data.forEach((item, index) => {
        if (item.children.length > 0) {
          item.children.forEach((i, ind) => {
            if (i.children.length > 0) {
              i.children.forEach((j, indexs) => {
                if (j.id === id) {
                  name = i.label
                }
              })
            }
          })
        }
      })
      return name
    },

    // 确定
    updata() {
      let str = ''
      this.data1.forEach((item, index) => {
        str += item.id + ','
        this.echo.name.push(item.brand + item.label)
      })
      this.echo.strId = str.substr(0, str.length - 1)

      if (this.type === 1) {
        // 新增
        this.$emit('code', this.echo)
        this.quit()
      } else {
        // 编辑
        api.addFilmModelRelation({ film_id: this.film_id, model_ids: this.echo.strId }).then(res => {
          this.$emit('code', '编辑')
          this.quit()
        })
      }
    },
    // 取消
    cancel() {
      this.$emit('code', '取消')
    }
  }
}
</script>

<style>
.container{
    /* width: 1200px; */
    /* height: 700px; */
    /* margin:50px auto; */
    padding: 0;
}
  .trees{
    width: 100%;
    /* margin: 0 auto; */
    display: flex;
    justify-content: space-around;
  }
   .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .tree1{
    height: 500px;
    padding: 5px;
    overflow: scroll;
    overflow-x:hidden ;
  }
  .treeP{
    width:40%;border: 1px solid #ebeef5;border-radius:5px;
  }
  .titles{
    height: 40px;
    border-bottom: 1px solid #f5f7fa;
    margin: 0;
    box-sizing: border-box;
    padding: 0 5%;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
  }
 .btn{
     margin: auto;
  }
</style>