问题：
由于get_roles方法存在处理时间长的问题，总是导致页面显示的时候，有显示不出来穿梭狂后面框里面内容的问题，经过2天的努力，终于找到原因，原来是异步调用的问题，需要设置等待时间，哎，一个简单的问题，搞了好些天：结果setTimeout 一个函数搞定；
完整代码：

<style lang="less">
@import "../../styles/common.less";
@import "./roles-edit.less";
</style>

<template>
  <Card>
    <p slot="title" align="center">{{ title }}</p>
    <Row>
      <Form
        ref="formdata"
        :model="formdata"
        :rules="ruleValidate"
        :label-width="80"
      >
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="角色名称" prop="name">
              <Input v-model="formdata.name" placeholder="角色名称英文">
                {{ formdata.name }}
              </Input>
            </FormItem>
          </Col>
          <Col span="8">
            <div style="font-size: 12px; color: #c5c8ce">
              不超过64个字符，允许英文字母、数字，或"-",不可为中文
            </div>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="备注信息" prop="note">
              <Input v-model="formdata.note" placeholder="角色用途说明">
                {{ formdata.note }}
              </Input>
            </FormItem>
          </Col>
          <Col span="8">
            <div style="font-size: 12px; color: #c5c8ce">
              不超过64个字符，允许中英文字符、数字，或"-",
            </div>
          </Col>
        </Row>

        <FormItem label="权限信息" prop="permissions">
          <Transfer
            :titles="permissions_title"
            :data="all_permissions"
            :target-keys="permissionKeys"
            :list-style="listStyle"
            :render-format="render1"
            @on-change="handleChange"
          ></Transfer>
        </FormItem>

        <FormItem>
          <Button
            type="primary"
            style="width: 100px; text-align: center"
            @click="submit(_id, formdata)"
            >提交</Button
          >
        </FormItem>
      </Form>
    </Row>
  </Card>
</template>
<script>
import Cookies from "js-cookie";
import { get_roles, post_roles, get_permission2 } from "@/api/oms_server";
export default {
  name: "rule",
  data() {
    return {
      _id: "",
      title: "",
      permissions_title: ["所有权限列表", "当前权限列表"],
      all_permissions: [], // 权限表中的可供分配的所有权限
      permissionKeys: [], // 设置给当前角色的权限所对应的key,取的是表中的id
      listStyle: {
        // 设置给穿梭框的规格大小
        width: "400px",
        height: "500px",
      },
      // 表单数据，表单数据主要包含
      formdata: {
        name: "",
        permissions: [],
        note: "",
      },
      //校验
      ruleValidate: {
        name: [
          {
            required: true,
            message: "角色名称不能为空",
            trigger: "blur",
          },
        ],
        note: [
          {
            required: true,
            message: "备注说明不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    init() {
      //如果是编辑模式，需要获得对应的role，以及对应的role所具有的权限
      this.all_permissions = this.getPermissions();
      let _id = this.$route.query._id;
      this._id = _id;
      //找到编辑所在的role
      setTimeout(() => {
        get_roles(null, null)
          .then((response) => {
            response.data.data.every((v, i) => {
              if (v._id == this._id) {
                this.formdata = v;
                this.formdata.permissions.forEach((v1, i1, arr) => {
                  this.all_permissions.forEach((v2, i2, arr2) => {
                    if (v2.label == v1) {
                      this.permissionKeys.push(v2.key);
                    }
                  });
                });
              }
            });
          })
          .catch((error) => {
            console.log(error);
          })
          .finally(() => {
            this.title = this._id
              ? "角色更新[" + this.formdata.name + "]"
              : "角色新增";
          });
      }, 100);

      // 通过role对应的权限，获得该权限对应的_id,this.formdata.permissions为角色对应的权限数组
    },
    getPermissions() {
      var pers = [];
      // pers.length = 10;
      get_permission2()
        .then((response) => {
          response.data.data.forEach((v, i, arr) => {
            if (v.name && v.name != "") {
              pers.push({
                key: v._id.toString(),
                label: v.name, //权限名
                description: v.cname,
              });
            }
          });
        })
        .catch((error) => {
          this.$Message.error(error);
          console.log("error", error);
        });
      return pers;
    },
    render1(item) {
      return item.label + " - " + item.description;
    },
    handleChange(newTargetKeys, direction, moveKeys) {
      this.permissionKeys = newTargetKeys;
    },
    submit(id, data) {
      this.formdata.permissions.length = 0;
      for (let i = 0; i < this.permissionKeys.length; i++) {
        for (let j = 0; j < this.all_permissions.length; j++) {
          if (
            this.all_permissions[j]["key"].indexOf(this.permissionKeys[i]) >= 0
          ) {
            this.formdata.permissions.push(this.all_permissions[j]["label"]);
          }
        }
      }
      post_roles(id, data)
        .then((response) => {
          this.$Message.success("数据修改成功.");
          this.$router.push({
            name: "roles_index",
          });
        })
        .catch((error) => {
          this.$Message.error(error);
          console.log("error", error);
        })
        .finally(() => {
          console.log("submit", data);
        });
    },
  },

  mounted() {
    this.init();
  },
  // watch: {
  //   $route() {
  //     this.init();
  //   },
  // },
};
</script>