ele对话框-下拉篇

最新推荐文章于 2024-07-15 14:54:09 发布

接受卍制裁

最新推荐文章于 2024-07-15 14:54:09 发布

阅读量599

点赞数

分类专栏：快速cv 文章标签： vue.js 前端 elementui

本文链接： https://blog.csdn.net/weixin_54206707/article/details/131254392

版权

快速cv 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这段代码展示了如何在Vue应用中使用Element-Plus库创建一个包含下拉菜单的弹出对话框。对话框包含了用户角色分配的功能，使用了TS（TypeScript）进行状态管理。用户可以打开对话框，选择角色并进行确认或取消操作。

摘要由CSDN通过智能技术生成

整体代码

<template>
  <!-- Form -->
  <el-button text @click="dialogFormVisible1 = true">
    open a Form nested Dialog
  </el-button>

  <el-dialog v-model="dialogFormVisible1" title="分配角色">
    <el-form :model="form">
      <el-form-item label=" 当前用户: " :label-width="formLabelWidth">
      </el-form-item>
      <el-form-item label="当前角色:" :label-width="formLabelWidth">
      </el-form-item>
      <el-form-item label="分配橘色" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择文章标签">
            <!-- <el-option v-for="" label="Zone No.1" value="shanghai" /> -->
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible1 = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

const dialogTableVisible = ref(false);
const dialogFormVisible1 = ref(false);
const formLabelWidth = "140px";

const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>