element el-transfer自定义穿梭框的数据项

自定义穿梭框数据项最终样式如下：

 前端代码：

        通过判断该选项是否在被选数据中来决定是否在数据后显示授权类型，显示是在v-if="formate(option)"决定。两种授权类型点击切换是直接因为transferValue只是存储选中的数据key组成的数组，所以在提交的时候需要循环遍历一下transferData，获取每个用户的信息、授权类型等。

          <el-transfer
            v-model="transferValue"
            :data="transferData"
            :titles="['用户信息', '授权用户']"
            :filterable="true"
          >
            <div slot-scope="{ option }">
              <span class="label-style">
                {{ option.authName }}
              </span>
              <div style="float: right" v-if="formate(option)">
                <el-radio
                  v-model="option.authType"
                  @click="authChange(option, '1')"
                  label="1"
                >
                  仅查看
                </el-radio>
                <el-radio
                  v-model="option.authType"
                  @click="authChange(option, '2')"
                  label="2"
                >
                  可编辑
                </el-radio>
              </div>
            </div>
          </el-transfer>

    /** 格式化 */
    private formate(data) {
        let dataFlag = false
        //如果被选择 则显示两种授权类型
        this.transferValue.filter(function (row) {
            if (row == data.key) {
                dataFlag = true
            }
        })
        return dataFlag;
    }

    //打印当前操作
    private authChange(data, value) {
        console.log(data, value)
    }

数据获取：

        let dataList = []
        if (this.transferValue.length > 0) {
            for (let i = 0; i < this.transferValue.length; i++) {
                let data = this.transferValue[i]
                let res = (this.transferData as any).filter(item => item.authCode === data);
                console.log(res)
                if (!!res && res.length > 0) {
                    dataList.push({
                        authCode: data,
                        authType: res[0].authType
                    })
                }
            }
        }

数据格式：

随便造点数据 index = 0;i++;
                    {
                        'key': i,
                        'label': '选项' + i,
                        'authCode': i,
                        'authName': '选项' + i,
                        'authType': '1',
                    }

css样式：

.label-style {
  width: calc(100% - 149px);
  float: left;
  //文字超出部分显示省略号
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/deep/.el-radio {
  margin-right: 8px;
}