elementui Transfer组件 模板

1.效果

2.代码实现

        <div class="transfer">
          <!-- 穿梭框                  -->
          <div style="text-align: center">
            <el-transfer
              style="text-align: left; display: inline-block"
              v-model="checkedValue"
              filterable
              :render-content="renderFunc"
              :titles="['待选表单', '已选表单']"
              :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}',
              }"
              @change="handleChange"
              :data="data"
            >
            </el-transfer>
          </div>
        </div>
//js
data() {
    return {
      //穿梭框
      checkedValue: [],
      renderFunc(h, option) {
        return <span>{option.label}</span>;
      },
      },
 methods: {
      handleChange(value, direction, movedKeys) {
      this.addRuleform.packCodes = value;  //我自己的业务逻辑

      // console.log("val", value);
      // console.log("add", this.addRuleform.packCodes, this.checkedValue);
    },
}      
//css
.transfer {
  margin-top: 24px;
}

::v-deep .el-transfer-panel {
  // 左右两边尺寸
  width: 538px;
  height: 506px;
  .el-transfer-panel__header {
    //左右边头部尺寸
    height: 40px;
    .el-checkbox {
      line-height: 40px;
      //字体大小
      .el-checkbox__label {
        font-size: 14px;
        span {
          font-size: 14px;
        }
      }
    }
  }
  .el-transfer-panel__body {
    height: 460px;
    .el-transfer-panel__filter {
      //搜索框字体大小
      font-size: 14px;
      .el-input__inner {
        height: 30px;
        font-size: 14px;
      }
      .el-input__prefix {
        left: 0;
        top: 0;
      }
    }
    //显示列表区域
    .el-transfer-panel__list {
      height: 406px;
      padding-top: 0;
      .el-transfer-panel__item {
        height: 40px;
        line-height: 40px;
        .el-checkbox__label {
          font-size: 14px;
        }
      }
    }
  }
}
.transfer ::v-deep .el-transfer__buttons {
  width: 100px;
  padding: 0 10px;
  .el-button,
  .is-disabled {
    color: #c0c4cc;
    opacity: 1;
    background-color: #fff;
    border-color: #e6ebf5;
  }

  .el-button:hover {
    color: #0064cb;
    border-color: #b3d1ef;
    background-color: #e6f0fa;
  }
  .is-disabled:hover {
    color: #c0c4cc;
    background-color: #fff;
    border-color: #e6ebf5;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
}