問題：
由于get_roles方法存在處理時間長的問題，總是導致頁面顯示的時候，有顯示不出來穿梭狂后面框里面內容的問題，經(jīng)過2天的努力，終于找到原因，原來是異步調用的問題，需要設置等待時間，哎，一個簡單的問題，搞了好些天：結果setTimeout 一個函數(shù)搞定；
完整代碼：

<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個字符，允許英文字母、數(shù)字，或"-",不可為中文
            </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個字符，允許中英文字符、數(shù)字，或"-",
            </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: {
        // 設置給穿梭框的規(guī)格大小
        width: "400px",
        height: "500px",
      },
      // 表單數(shù)據(jù)，表單數(shù)據(jù)主要包含
      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為角色對應的權限數(shù)組
    },
    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("數(shù)據(jù)修改成功.");
          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>