el-checkbox-group实现穿梭框的效果，含有模糊查询

用el-checkbox-group组件，可全选添加和移除；左边勾选点击添加按钮，自动去除，右边增加；右边勾选点击移除按钮，自动去除，左边增加；点击文字可预览最右边权限；效果图如下： 

<div style="background:#fff; padding:10px">
     <el-row :gutter="20">
       <el-col :span="8">
          <div class="transfer-box">
            <div class="transfer-box-header">
               <el-checkbox @change="getLeftValue" v-model="leftCheck" :indeterminate="isIndeterminate" ><b>可选功能权限</b></el-checkbox>
               <div style="float:right; margin-right:10px"><el-button  type="success"  size="small" @click="add">添加<i class="el-icon-arrow-right el-icon--right"></i></el-button></div> 
            </div>
            <div class="transfer-box-content">
               <el-input  placeholder="输入关键字查询" v-model="params.roleName" clearable></el-input>
                <el-checkbox-group v-model="checkedLeftId" @change="handleChangeLeft">
                  <el-checkbox v-for="item in dataLists" :label="item.perId" :key="item.perId"><a href="http://www.baidu.com">{{item.perName}}</a></el-checkbox>
                </el-checkbox-group>
            </div>
          </div>
       </el-col>
       <el-col :span="8">
          <div class="transfer-box">
            <div class="transfer-box-header">
               <el-checkbox @change="getRightValue" v-model="rightCheck" :isIndeterminate="isIndeterminate2"><b>已选功能权限</b></el-checkbox>
               <div style="float:right; margin-right:10px"><el-button  type="success" icon="el-icon-arrow-left" size="small" @click="del">移除</el-button></div> 
            </div>
            <div class="transfer-box-content">
                <el-checkbox-group v-model="checkedRightId" @change="handleChangeRight">
                  <el-checkbox v-for="item in dataListRight" :label="item.perId" :key="item.perId"><a href="http://www.baidu.com">{{item.perName}}</a></el-checkbox>
                </el-checkbox-group>
            </div>
          </div>
       </el-col>
       <el-col :span="8">
          <div class="transfer-box">
            <div class="transfer-box-header">
               <b>权限预览</b>
               <div style="float:right; margin-right:10px"><el-button  type="success"  size="small" @click="add" style="width:140px">查看已选权限</el-button></div> 
            </div>
            <div class="transfer-box-content">
               <el-tree
                :data="dataAll"
                node-key="resId"
                ref="tree"
                :props="defaultProps">
            </el-tree>
            </div>
          </div>
       </el-col>
     </el-row>
     <div class="opt-footer-btn">
        <el-button type="default" @click="returnList()">返回列表</el-button>
        <el-button type="primary" @click="handleSubmit()" :loading="btnLoading" >确定</el-button>
     </div>
    </div>

1、用computed计算属性实现模糊查询；

2、对于全选中isIndeterminate值和v-model="leftCheck"的值绑定的关系

如果true true 或者 true false样式为 -

如果false true样式为√

如果false false样式为不勾

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
       perId:'',
       topInfo:{},
       btnLoading:false,
       selectedResRows:[],
       dataList:[
         {perId:"39",perName: "wwh权限"},
         {perId:"40",perName: "定制打印"},
         {perId:"41",perName: "证照系统管理人员"},
         {perId:"42",perName: "下发订单跟踪报表"},
       ],
       dataAll:[],
       defaultProps: {
          children: 'children',//子集
          label: 'resName'//显示的文本
        },
      pxPage:'',
      leftCheck:false,
      rightCheck:false,
      checkedLeftList:[],
      checkedRightList:[],
      checkedLeftId:[],
      checkedRightId:[],
      isIndeterminate: false,
      isIndeterminate2:false,
      dataListRight:[],
      params:{
          roleName: '',//关键字查询-角色名称
       }
    };
  },
  computed: {
        dataLists() {
            let arrList =[]
            this.dataList.map(item=>{
                if(item.perName.indexOf(this.params.roleName)!=-1){
                    arrList.push(item)
                }
            })
            return arrList;
        },
    },
  methods: {
    getTop(){
      let param={
        perId:this.perId
      }
      this.$api.per.getPerDetail(param).then(res => {
          if (res.data.code == "0") {
            this.topInfo = res.data.data;
            this.getAllResTreeList(this.topInfo.mdcKey)
          }
        })
        .catch(error => {
        });
    },
    //勾选左边
    handleChangeLeft(value){
        this.checkedLeftList=value;//id
        let checkedCount = value.length;
        this.leftCheck = checkedCount === this.dataList.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataList.length;
    },
    //全选左边
    getLeftValue(val){
      this.checkedLeftId = val ? this.dataList.map(item=> item.perId) : [];
      this.checkedLeftList=val ?this.checkedLeftId:this.checkedLeftList
      this.isIndeterminate = false;
    },
    //勾选右边
    handleChangeRight(value){
      this.checkedRightList=value;//id
      let checkedCount = value.length;
      this.rightCheck = checkedCount === this.dataListRight.length;
      this.isIndeterminate2 = checkedCount > 0 && checkedCount < this.dataListRight.length;
    },
    //全选右边
    getRightValue(val){
      this.checkedRightId = val ? this.dataListRight.map(item=> item.perId) : [];
      this.checkedRightList=val ?this.checkedRightId:this.checkedRightList
      this.isIndeterminate2 = false;
    },
      add() {
        this.remove(this.dataList,this.checkedLeftList,this.dataListRight)
        this.checkedLeftList=[];
        this.checkedLeftId=[];
        this.leftCheck=false;
        this.isIndeterminate = false;
      },
      del() { 
        this.remove(this.dataListRight,this.checkedRightList,this.dataList)
        this.checkedRightList=[];
        this.checkedRightId=[];
        this.rightCheck=false;
        this.isIndeterminate2 = false;
      },
     /**
      * 方法左右移动**/
     remove(dataOrigin,originCheckList,dataTarget){
        dataOrigin.forEach((item,index)=>{
          for(var i=0;i<originCheckList.length;i++){
            if(item.perId==originCheckList[i]){
               dataTarget.push(item)
               
            }
          }
        })
         originCheckList.forEach((delItem) => {
              //找到选中的元素删除
              let index = dataOrigin.findIndex((findItem) => {
                  return delItem == findItem.perId;
              });
              index > -1 && dataOrigin.splice(index, 1);
              
          });
          
     },
      
  },
  created() {
    this.perId=this.$route.query.perId||''
    this.getTop();
  }
};
</script>

<style>
/*穿梭*/
.transfer-box{
  border: 1px solid #EBEEF5;
   border-radius: 0px;
   overflow: hidden;
   background: #FFFFFF;
   display: inline-block;
   vertical-align: middle;
   width: 100%;
   max-height: 100%;
   position: relative;}
.transfer-box-header{
 height: 40px;
   line-height: 40px;
   background: #F5F7FA;
   margin: 0;
   padding-left: 15px;
   border-bottom: 1px solid #EBEEF5;
   box-sizing: border-box;
   color: #000000;
}
.transfer-box-content{ height: calc(100vh - 230px); padding: 10px; overflow-y: auto; }
.opt-footer-btn{padding:6px 0px; text-align: center; margin-top: 10px;}
.qxbox .el-descriptions-item__content{ color:#0f58b8;}
.qxbox .el-descriptions__body{background: inherit;}
.td-link{
  color: $mainBg;
  cursor: pointer;
  text-decoration: underline;
  &:hover{
    color: #3a8ee6;
  }
}
.transfer-box-content .el-checkbox-group{ padding-left: 5px;}
.transfer-box-content .el-checkbox-group .el-checkbox{ width: 90%; padding: 5px 0px;}
</style>