Element ui Dialog弹出框宽度固定不变

本文介绍如何正确设置Dialog弹出框的宽度,避免内容溢出,并提供了固定宽度的设置方法。同时,文章还介绍了如何通过修改配置使点击遮罩层时弹窗不会关闭。

一般我们引用Dialog弹出框时,弹出框的大小都是用width="30%"这样来设置,这样的话我们在缩小屏幕的时候弹出框就会根据你缩小屏幕的宽度的百分比来设置,这样你弹出框里面的东西就会溢出,如果你不想溢出就把宽度写成width="500px",这样就可以了!注意px后面没有分号!!

 //width属性设置一个固定宽度就可以了,宽度后面得加上px
<el-dialog
      title="部件信息"
      :visible.sync="isParts"
       width="1100px"
      :before-close="closeDetail"
    >
</el-dialog>

实现点击遮罩层不关闭弹窗

//main.js文件
// 弹窗点击遮罩层不关闭
Element.Dialog.props.closeOnClickModal.default = false;

<template> <!-- 顶部搜索区域 --> <div class="filter-container"> <el-form :inline="true" :model="searchForm"> <!-- 问卷标题搜索 --> <el-form-item label="问卷标题"> <el-input v-model="searchForm.dcWjTitle" placeholder="输入问卷标题" clearable /> </el-form-item> <!-- 被测评人ID搜索 --> <el-form-item label="被测评人ID"> <el-input v-model="searchForm.dcid" placeholder="输入被测评人ID" clearable /> </el-form-item> <!-- 部门选择 --> <el-form-item label="人员部门"> <el-select v-model="searchForm.dcDept" placeholder="选择部门" clearable > <el-option v-for="dept in departments" :key="dept.value" :label="dept.label" :value="dept.value" /> </el-select> </el-form-item> <!-- 状态选择 --> <el-form-item label="提交状态"> <el-select v-model="searchForm.state" placeholder="选择状态" clearable > <el-option label="已提交" value="1" /> <el-option label="未提交" value="0" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="handleSearch" icon="el-icon-search" >搜索</el-button> </el-form-item> </el-form> </div> <!-- 数据表格 --> <el-table :data="filteredData"> <!-- 表格列定义 --> </el-table> </template> <script> export default { data() { return { searchForm: { dcWjTitle: &#39;&#39;, dcid: &#39;&#39;, dcDept: &#39;&#39;, state: &#39;&#39; }, rawData: [], // 原始数据 departments: [ // 部门选项 { label: &#39;技术部&#39;, value: &#39;tech&#39; }, { label: &#39;市场部&#39;, value: &#39;market&#39; } ] } }, computed: { // 过滤后的数据 filteredData() { return this.rawData.filter(item => (!this.searchForm.dcWjTitle || item.title.includes(this.searchForm.dcWjTitle)) && (!this.searchForm.dcid || item.dcid === this.searchForm.dcid) && (!this.searchForm.dcDept || item.dept === this.searchForm.dcDept) && (!this.searchForm.state || item.state === this.searchForm.state) ) } }, methods: { // 触发搜索 handleSearch() { this.fetchFilteredData() }, // 从后端获取数据 async fetchFilteredData() { try { const params = { title: this.searchForm.dcWjTitle, dcid: this.searchForm.dcid, dept: this.searchForm.dcDept, state: this.searchForm.state } // 调用后端API(示例) const { data } = await axios.get(&#39;/api/questionnaires&#39;, { params }) this.rawData = data } catch (error) { console.error(&#39;获取数据失败&#39;, error) } } } } </script> 帮我优化一下布局,适用于移动端
07-15
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值