解决ElementUI表单中下拉框的值在关闭对话框时v-model绑定的值会被清空的情况

在关闭对话框的时候手动将form.role的值保存到一个变量中,下次打开对话框时将这个变量的值赋给form.role即可

<el-dialog :visible.sync="dialogVisible" @close="handleClose">
  <el-form :model="form" :rules="rules">
    <el-form-item label="角色分配" prop="role">
      <el-select v-model="form.role" multiple placeholder="请选择角色">
        <el-option v-for="item in options" :key="item.id" :label="item.role_name" :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</el-dialog>
 <script>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        role: [],
      },
      savedRole: [], // 保存下拉框的值
      options: [],
      rules: {},
    };
  },
  methods: {
    handleClose() {
      // 关闭对话框时保存下拉框的值
      this.savedRole = this.form.role.slice();
    },
    handleOpen() {
      // 打开对话框时将保存的值赋给下拉框
      this.form.role = this.savedRole.slice();
    },
  },
};
</script>